css - style - li label html

Arranque angular desplegable para abrir a la izquierda

Question

He utilizado el link desplegable angular bootstrap con éxito. Pero el problema es que el menú desplegable se abre en el lado derecho. ¿Cómo puedo hacer que se abra a la izquierda? Aquí está el marcado y js que he usado desde el enlace dado.

Margen:

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

por favor ayuda

Answer 1

Agregue la clase dropdown-menu-right a su <ul uib-dropdown-menu> .

Por defecto, el drowpdown se abre alineado al lado izquierdo del padre y crece hacia el lado derecho. Cuando se agrega la clase dropdown-menu-right , se abrirá alineado en el lado derecho.

EDITAR:
Angular Bootstrap con Bootstrap 4 permite una colocación más precisa del menú desplegable, usando el atributo de placement (con posibles opciones de bottom-right , right o top-right ).
Fuente: https://ng-bootstrap.github.io/#/components/dropdown/api

Vue-Bootstrap proporciona el atributo right (booleano).
Fuente: https://bootstrap-vue.js.org/docs/components/dropdown/#bd-content

React-bootstrap llama al atributo pullRight (booleano)
Fuente: https://react-bootstrap.github.io/components/dropdowns/#btn-dropdowns-right