typeahead下拉结果右 - 右 - 右
[英]typeahead dropdown results align right - pull-right
问题描述
Trying to understand how to implement the pull-right class within the angular typeahead dropdown only. 
试图了解如何在angular typeahead下拉列表中实现pull-right类。
Issues: 问题：
- input is located on RHS of window (which is typical for a search input box) 输入位于窗口的RHS（这是搜索输入框的典型值）
- my results are wider then my input (and the containing div) 我的结果比我的输入（和包含div）更宽
- I need right side of dropdown to align with right side of input box, and to extend on the left past (below) the input width. 我需要下拉列表的右侧与输入框的右侧对齐，并在输入宽度的左侧（下方）延伸。
- (dropdown only needs shifting, text alignment within doesn't change and should stay aligned to left. ie. Not an RTL as in this issue: RTL for angularjs bootstrap's typeahead ) （下拉列表只需要移位，内部的文本对齐不会改变，并且应保持与左对齐。即，不是本期问题中的RTL ： angularjs bootstrap的typeahead的RTL ）
Applying pull-right class to a containing div doesn't seem to affect the drop-down independently of the input. 将pull-right类应用于包含div似乎不会独立于输入影响下拉列表。
I'm not sure where else to put it ? 我不知道还能把它放在哪里？
Is there a CSS method of controlling the alignment of the dropdown div? 是否有一种CSS方法来控制下拉div的对齐方式？
Have modified the documentation example in the following Plunker : 修改了以下Plunker中的文档示例 ：
- includes the
pull-rightclass in the containing div包含包含div中的pull-right类 - placed in a containing div to narrow the width (perhaps unnecessary ?) 放在一个包含div中以缩小宽度（可能不必要？）
If you type ' ang ' into the plunker example inputbox you'll see the results spill past the right of the window. 如果在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>
I've looked at the following issues, which don't seem to help me: 我看了下面的问题，似乎对我没有帮助：
- SO issue 22075432 - typeahead-alignment-issue 所以问题22075432 - typeahead -alignment-issue
- github bootstrap issues 2045 github bootstrap问题2045
2 个解决方案
解决方案1
3 已采纳 2015-03-31 22:25:32
You would need to override the inline-style that get generated for .drop-down-menu by typeahead. 您需要覆盖由.drop-down-menu为.drop-down-menu生成的内联样式。 Something along the the lines of: 沿线的东西：
<script>
$('#myInput').on('keypup', function() {
$(".dropdown-menu").css({ "left": "auto", "right": "10px" });
});
</script>
Note: set right to whatever the distance is between your input and the RHS of the page/window 注意： right设置input与页面/窗口的RHS之间的距离
Update
更新
For a non-jQuery version you would have to override the left css attribute of .dropdown-menu using !important 对于非jQuery版本，您必须使用!important覆盖.dropdown-menu的left css属性
.dropdown-menu{ left: auto !important; right:10px; }
解决方案2
0 2017-05-10 18:41:29
Another option is use the typeahead-popup-template-url hook with a little change on the default template implementation. 另一种选择是使用typeahead-popup-template-url钩子，对默认模板实现稍作修改。
Using this approach you can use more than one instance of ui-typeahead defining the desired layout one by one. 使用此方法，您可以使用多个ui-typeahead实例逐个定义所需的布局。
Don't forget to tune the right length for your specific usage. 不要忘记根据具体用途调整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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.