试图了解如何仅在 Angular 预输入下拉列表中实现 pull-right
类。
问题:
- 输入位于窗口的 RHS(这是典型的搜索输入框)
- 我的结果比我的输入(和包含的 div)更宽
- 我需要下拉列表的右侧与输入框的右侧对齐,并向左侧延伸超过(下方)输入宽度。
- (下拉列表只需要移动,其中的文本对齐不会改变并且应该保持向左对齐。即不是本期中的 RTL:RTL for angularjs bootstrap's typeahead)
将 pull-right
类应用于包含的 div 似乎不会独立于输入影响下拉列表。
我不确定该把它放在哪里?
有没有CSS方法控制下拉div的对齐方式?
修改了documentation example在下面Plunker :
- 在包含的 div 中包含
pull-right
类 - 放置在包含的 div 中以缩小宽度(也许是不必要的?)
如果您在 plunker 示例输入框中键入“ang”,您将看到结果溢出窗口右侧。
<div class='column'>
<div class='container-fluid pull-right' ng-controller="TypeaheadCtrl">
<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
</div>
我查看了以下问题,它们似乎对我没有帮助:
- SO issue 22075432 - 提前对齐问题
- github bootstrap问题 2045
最佳答案
您需要覆盖通过提前输入为 .drop-down-menu
生成的内联样式。类似以下内容:
<script>
$('#myInput').on('keypup', function() {
$(".dropdown-menu").css({ "left": "auto", "right": "10px" });
});
</script>
注意:将 right
设置为您的 input
和页面/窗口的 RHS 之间的任何距离
更新
对于非 jQuery 版本,您必须使用 !important
覆盖 .dropdown-menu
的 left
css 属性。
.dropdown-menu{
left: auto !important;
right:10px;
}
关于javascript - typeahead 下拉结果右对齐 - pull-right,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29362520/