admin管理员组文章数量:1331640
Trying to understand how to implement the pull-right
class within the angular typeahead dropdown only.
Issues:
- input is located on RHS of window (which is typical for a search input box)
- my results are wider then my input (and the containing 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)
Applying pull-right
class to a containing div doesn't seem to affect the drop-down independently of the input.
I'm not sure where else to put it ?
Is there a CSS method of controlling the alignment of the dropdown div?
Have modified the documentation example in the following Plunker:
- includes the
pull-right
class in the containing div - placed in a containing div to narrow the width (perhaps unnecessary ?)
If you type 'ang' into the plunker example inputbox you'll see the results spill past the right of the 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>
I've looked at the following issues, which don't seem to help me:
- SO issue 22075432 - typeahead-alignment-issue
- github bootstrap issues 2045
Trying to understand how to implement the pull-right
class within the angular typeahead dropdown only.
Issues:
- input is located on RHS of window (which is typical for a search input box)
- my results are wider then my input (and the containing 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)
Applying pull-right
class to a containing div doesn't seem to affect the drop-down independently of the input.
I'm not sure where else to put it ?
Is there a CSS method of controlling the alignment of the dropdown div?
Have modified the documentation example in the following Plunker:
- includes the
pull-right
class in the containing div - placed in a containing div to narrow the width (perhaps unnecessary ?)
If you type 'ang' into the plunker example inputbox you'll see the results spill past the right of the 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>
I've looked at the following issues, which don't seem to help me:
- SO issue 22075432 - typeahead-alignment-issue
- github bootstrap issues 2045
2 Answers
Reset to default 5You would need to override the inline-style that get generated for .drop-down-menu
by typeahead. Something along the the lines of:
<script>
$('#myInput').on('keypup', function() {
$(".dropdown-menu").css({ "left": "auto", "right": "10px" });
});
</script>
Plunker
Note: set right
to whatever the distance is between your input
and the RHS of the page/window
Update
For a non-jQuery version you would have to override the left
css attribute of .dropdown-menu
using !important
.dropdown-menu{
left: auto !important;
right:10px;
}
Updated Plunker
Another option is use the typeahead-popup-template-url
hook with a little change on the default template implementation.
Using this approach you can use more than one instance of ui-typeahead defining the desired layout one by one.
Don't forget to tune the right
length for your specific usage.
(function () {
'use strict';
angular.module('myAnswer', ['ui.bootstrap']);
})();
<html ng-app="myAnswer">
<head>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis./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./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>
本文标签: javascripttypeahead dropdown results align rightpullrightStack Overflow
版权声明:本文标题:javascript - typeahead dropdown results align right - pull-right - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742265835a2443373.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论