css - angular bootstrap dropdown to open on left -
i have used angular bootstrap dropdown link. problem dropdown opens on right side. how can make open on left? here markup , js used given link.
markup:
<div ng-controller="dropdownctrl"> <!-- single button 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 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 choice you.', 'but wait! third!' ]; $scope.status = { isopen: false }; $scope.toggled = function(open) { $log.log('dropdown 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')); });
please help
add class dropdown-menu-right
<ul uib-dropdown-menu>
.
by default, drowpdown opens aligned left side of parent , growing towards right side. when added class dropdown-menu-right
open aligned on right side.
Comments
Post a Comment