javascript – typeahead下拉结果右对齐 – 右拉

2019年8月5日 254次阅读

试图了解如何在angular typeahead下拉列表中实现pull-right类.

问题：

>输入位于窗口的RHS上(这是搜索输入框的典型情况)
>我的结果比我的输入(和包含div)更宽
>我需要下拉列表的右侧与输入框的右侧对齐,并在输入宽度的左侧(下方)延伸.
>(下拉列表只需要移位,内部的文本对齐不会改变,并且应该保持与左对齐.即,不是本期中的RTL：RTL for angularjs bootstrap’s typeahead)

将pull-right类应用于包含div似乎不会独立于输入影响下拉列表.
我不知道还能把它放在哪里？

是否有一种CSS方法来控制下拉div的对齐方式？

修改了以下Plunker中的documentation example：

>包含包含div中的右拉类
>放置在一个包含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 – typeahead-alignment-issue
> github bootstrap发行2045

最佳答案 您需要覆盖由typeahead为.drop-down-menu生成的内联样式.沿线的东西：

<script>
  $('#myInput').on('keypup', function() {
    $(".dropdown-menu").css({ "left": "auto", "right": "10px" });
  });
</script>

Plunker

注意：向右设置输入与页面/窗口的RHS之间的距离

更新

对于非jQuery版本,您必须使用！important覆盖.dropdown-menu的左css属性

.dropdown-menu{
  left: auto !important;
  right:10px;
}

Updated Plunker

点赞