web-dev-qa-db-fra.com

Angulaire 5 ng-select

J'utilise le composant ng-select de https://github.com/ng-select/ng-select . Cependant, le contenu de la liste déroulante est parfois trop long. La chaîne dans la liste déroulante sera raccourcie de ... Est-il possible de rendre la liste déroulante plus grande que la largeur d'entrée, en fonction de la longueur du contenu? Peut-être avec un style CSS (personnalisé).

<div layout="row">
    <label>Your first ng-select</label>
    <ng-select class="custom" [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity">
    </ng-select>

    <label>Your first ng-select</label>
    <ng-select class="custom" [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity">
    </ng-select>
</div
angularangular-ngselect
2
Dev Db

Dans le jeu CSS/SCSS (ce que vous utilisez pour le style) 

.ng-dropdown-panel {
    min-width: 100%;
}

Cependant, ça n'a pas l'air bon ...

 enter image description here

Alternative:

Supprimez white-space: nowrap; de .ng-dropdown-panel .ng-dropdown-panel-items .ng-option puis il se divise en plusieurs lignes.

 enter image description here

3
Stefan
  1. Ajoutez une encapsulation: ViewEncapsulation.Nonne.

  2. Donnez-lui un nom de classe. Et remplacer le CSS en l'utilisant 

    .ng-select.custom .ng-value-container { hauteur: 10px; }

Ici ng-select est le composant et custom est le nom de la classe.

0
user3847870