typeahead 下拉结果右对齐 - pull-right

Question

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

问题：

输入位于 window 的 RHS（这是典型的搜索输入框）
我的结果比我的输入（和包含 div）更宽
我需要下拉菜单的右侧与输入框的右侧对齐，并在左侧延伸超过（下方）输入宽度。
（下拉列表只需要移动，其中的文本对齐方式不会改变并且应该保持向左对齐。即，不是本期中的 RTL：）

将 pull-right class 应用于包含 div 似乎不会独立于输入影响下拉列表。
我不确定该把它放在哪里？

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

修改了documentation example in the following Plunker:

包含 pull-right class 包含 div
放置在包含div中以缩小宽度（也许是不必要的？）

如果您在 plunker 示例输入框中键入“ang”，您将看到结果超出 window.

的右侧

  <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

Answer 1

您需要覆盖通过提前输入为 .drop-down-menu 生成的内联样式。大致如下：

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

Plunker

注意：将 right 设置为您的 input 和 page/window

的 RHS 之间的任何距离

更新

对于非 jQuery 版本，您必须使用 !important

覆盖 .dropdown-menu 的 left css 属性

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

Updated Plunker

Answer 2

另一种选择是使用 typeahead-popup-template-url 挂钩，对默认模板实现稍作更改。

使用这种方法，您可以使用 ui-typeahead 的多个实例来一一定义所需的布局。

不要忘记根据您的特定用途调整 right 长度。

(function () {
 'use strict';

  angular.module('myAnswer', ['ui.bootstrap']);
  
})();

<html ng-app="myAnswer">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
  <div class='container-fluid'>

    <h4>Static arrays</h4>
    <pre>Model: {{selected | json}}</pre>
    
<script type="text/ng-template" id="typeahead-popup-right.html">
  <ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px',left: 'auto', right: '15px'}" role="listbox" aria-hidden="{{!isOpen()}}">
    <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index, $event)" role="option" id="{{::match.id}}">
      <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
    </li>
  </ul>
</script>    
    
    
    <input type="text" ng-model="selected" uib-typeahead="state for state in ['Espirito Santo', 'Minhas Gerais', 'Rio de Janeiro', 'São Paulo'] | filter:$viewValue" class="form-control" typeahead-popup-template-url="typeahead-popup-right.html">
    <small class="help-block">Try typing 'Rio' or 'Janeiro'</small>
  </div>
  </body>
</html>

typeahead 下拉结果右对齐 - pull-right

typeahead dropdown results align right - pull-right

javascript

typeahead

twitter-bootstrap

angularjs

angularjs-bootstrap