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

试图了解如何仅在角度typeahead下拉菜单中实现pull-right类。typeahead下拉结果右对齐 - 右对齐

问题：

输入位于窗口的RHS（这是典型的搜索输入框）
我的结果是较宽然后我的输入（和内含div）
我需要下拉的右侧与输入框的右侧对齐，并在输入宽度的左侧（下方）延伸。
（下拉只需要转移，文本对齐内不会改变，应保持对齐到左即不是一个RTL在这个问题：。RTL for angularjs bootstrap's typeahead）

应用pull-right类的容器div没有按” t似乎不依赖于输入而影响下拉。
我不知道还有什么地方放？

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

已修改在以下Plunker的documentation example：（？也许不必要）

包括内含div
置于含有div来缩小宽度pull-right类

如果您在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 - 预输入型取向的问题
github bootstrap问题2045

来源

2015-03-31 Ben

您需要重写typeahead为.drop-down-menu生成的内联样式。

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

Plunker

注：沿的东西线设置right到任何的距离是你的input和页面的RHS之间/窗口

更新

对于非jQuery版本，您将不得不重写left css attribut使用!important

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

Updated Plunker

来源

2015-03-31 22:25:32 Und3rTow

感谢@ M.Doye - 看起来像一个很好的解决方案 - 将这项工作在纯angularjs环境？（我们目前没有在应用程序中使用jquery）。我认为这需要某种指示？ – Ben 2015-04-02 17:31:01

@你可以用CSS来做，但必须使用'！important'。已经更新了我的答案以及猛击 – Und3rTow 2015-04-02 17:43:37

看起来不错！用两个不同的输入框和不同的结果对齐来修改你的plunker显示你的CSS解决方案http://plnkr.co/edit/3arh1IOcKFQoNsqG5hwM?p=preview – Ben 2015-04-02 17:59:12

另一种选择的.dropdown-menu e是用typeahead-popup-template-url钩上的默认模板实现变化不大。

使用此方法，可以使用多个ui-typeahead实例逐个定义所需的布局。

不要忘记调整right长度为您的具体用法。

(function() { 
 
\t '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>

来源

2017-05-10 18:41:29

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

回答

相关问题