typeahead 下拉结果右对齐 - 右拉

Question

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

问题：

• 输入位于窗口的右侧（这是搜索输入框的典型特征）
• 我的结果比我的输入（和包含的 div）更宽
• 我需要下拉列表的右侧与输入框的右侧对齐，并在左侧延伸超过（下方）输入宽度。
• （下拉只需要移动，文本对齐方式不会改变，应该保持向左对齐。即不是这个问题中的RTL：angularjs bootstrap's typeahead 的 RTL）

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

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

修改了以下Plunker 中的文档示例：

• pull-right在包含的 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 问题 22075432 - typeahead -alignment-issue
• github 引导程序问题 2045

Answer 1

您需要覆盖.drop-down-menu由 typeahead生成的内联样式。类似的东西：

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

普朗克

注意：设置right为您input和页面/窗口的 RHS之间的任何距离

更新

对于非 jQuery 版本，您必须覆盖using的leftcss 属性.dropdown-menu!important

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

更新的Plunker