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下拉結果右對齊 - 右對齊

回答

相關問題