web-dev-qa-db-fra.com

angular bootstrap liste déroulante pour ouvrir à gauche)

J'ai utilisé angular bootstrap dropdown avec succès link . Mais le problème c'est que la liste déroulante s'ouvre sur le côté droit. Comment puis-je faire ouvrir à gauche? Voici le balisage et js que j'ai utilisé à partir du lien donné.

Balisage:

<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'));
});

s'il vous plaît aider

cssangularjstwitter-bootstrapangular-bootstrap
23
Gaurav Gupta

Ajoutez la classe dropdown-menu-right à ton <ul uib-dropdown-menu>.

Par défaut, le drowpdown s'ouvre aligné sur le côté gauche du parent et grandissant vers le côté droit. Une fois ajouté, la classe dropdown-menu-right il s'ouvrira aligné sur le côté droit.

ÉDITER:
Angulaire Bootstrap avec Bootstrap 4 permet un placement plus précis de la liste déroulante, en utilisant l'attribut placement (w/choix possibles de bottom-right, right ou top-right).
Source: https://ng-bootstrap.github.io/#/components/dropdown/api

Vue-Bootstrap fournit l'attribut right (booléen).
Source: https://bootstrap-vue.js.org/docs/components/dropdown/#bd-content

React-bootstrap appelle l'attribut pullRight (booléen)
Source: https://react-bootstrap.github.io/components/dropdowns/#btn-dropdowns-right

63
Andrei Gheorghiu