angular bootstrap下拉框在左边打开 [英] angular bootstrap dropdown to open on left
本文介绍了angular bootstrap下拉框在左边打开的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已成功使用了angular bootstrap下拉菜单链接。
但是问题是,下拉列表在右侧打开。
我如何让它在左边打开?
这是从给定链接使用的标记和js i。
I have used angular bootstrap dropdown successfully link. But the problem it that the dropdown opens on the right side. How can i make it to open on left? Here is the markup and js i used from the given link.
标记:
<div ng-controller="DropdownCtrl">
<!-- Single button with keyboard nav -->
<div class="btn-group" uib-dropdown keyboard-nav>
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
Dropdown with keyboard navigation <span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
</div>
js:
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
$scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
});
请帮助
推荐答案
将下拉菜单右侧
添加到您的< ul uib-dropdown-menu>
。
默认情况下,drowpdown打开时对齐父对象的左侧并向右侧增长。当添加下拉菜单 - 右
类时,它将在右侧打开对齐。
By default, the drowpdown opens aligned to the left side of the parent and growing towards right side. When added the class dropdown-menu-right
it will open aligned on the right side.
这篇关于angular bootstrap下拉框在左边打开的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文