web-dev-qa-db-fra.com

NgbDropdown: supprimer la flèche de liste déroulante

J'utilise le composant NgbDropdown dans mon application Angular 2. Cela fonctionne bien, cependant je veux supprimer la flèche qui est affichée sur le côté droit du bouton.

<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

Dropdown Image

angularng-bootstrapangular2-ui-bootstrap
9
JP4

Solution

Ajoutez simplement le style CSS suivant pour remplacer le style par défaut du pseudo-élément .dropdown-toggle::after:

.dropdown-toggle::after {
    display:none;
}

Pourquoi?

Par défaut, bootstrap ajoute la flèche au composant déroulant via le ::afterpseudo- élément .

Faire cela l'enlève.

Voici un DEMO LIVE qui le démontre.

Comment vous y prenez-vous?

En utilisant les outils de développement de chrome, vous pouvez inspecter l'élément:

enter image description here

Nous pouvons voir ci-dessus qu'il existe un style défini pour un pseudo-élément :: after sur la classe .dropdown-toggle. Allons changer les propriétés de l'élément! Pour cela, nous modifions la propriété display en none:

enter image description here

Le pseudo-élément n'est plus là !!:

enter image description here

20
cnorthfield

ajouter le style suivant pour remplacer celui par défaut

.dropdown-toggle::after{
    content:initial
 }

LIVE DEMO

3
Aravind

Dans Bootstrap 4, vous pouvez supprimer la flèche de la liste déroulante appelée caret en déclarant une variable $enable-caret SASS et en la définissant sur false:

$enable-caret: false;

Cela remplace la valeur par défaut de true définie dans le _variable.scss du Bootstrap:

// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:                                true !default;

Mais gardez à l'esprit que cela supprime complètement les styles CSS correspondants. C'est donc la meilleure approche si vous n'avez pas besoin de carets au niveau mondial et que vous souhaitez réduire votre charge CSS.

0
Alexander Abakumov