Javascript typeahead下拉列表结果右对齐-右拉

试图了解如何仅在angular typeahead下拉列表中实现

pull right

类

问题：

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

对包含的div应用

pull right

类似乎不会独立于输入影响下拉列表。
我不知道还能放在哪里

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

已在以下内容中修改了：

• 在包含的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>

异步结果
模型：{{asyncSelected | json}}

我研究了以下问题，这些问题似乎对我没有帮助：

• -打印前对齐问题
• 第2045期

---

您需要覆盖为

生成的内联样式。下拉菜单

，按typeahead。大致如下：

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

---

另一个选项是使用

typeahead弹出模板url

钩子，对默认模板实现进行少许更改

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

不要忘记根据您的具体使用情况调整

右侧的
长度


（函数（）{
"严格使用",；
angular.module（'myAnswer'，['ui.bootstrap']）；
})();

静态阵列
模型：{selected | json}

尝试键入“Rio”或“Janeiro”
Thank@M.Doye-看起来是个不错的解决方案-在纯angularjs环境中可以工作吗？（我们目前在应用程序中没有jquery）。我想这需要某种指令？@Ben你可以只使用CSS，但必须使用
！重要信息
。已经更新了我的答案，而且看起来不错！修改了你的plunker，用两个不同的输入框显示你的CSS解决方案&不同的结果对齐现在你可以在页面的任意一侧显示：-）就我而言，这应该是公认的答案。一个改进是计算正确的位置。如果我们在控制器中获得页面宽度，如：
$scope.windowWidth=document.documentElement.clientWidth
。然后我们可以这样计算右位置：
right:$parent.windowWidth-position（）.left-position（）.width+'px'}“
.dropdown-menu{
  left: auto !important;
  right:10px;
}