gaurav gupta gaurav gupta - 1 year ago 411
CSS Question

angular bootstrap dropdown to open on left

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>
<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>


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) {
$scope.status.isopen = !$scope.status.isopen;

$scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));

please help

Answer Source

Add the class dropdown-menu-right to your <ul uib-dropdown-menu>.

The drowpdown opens on the left side by default and when added the class dropdown-menu-right it will open on the right side.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download