Угловой 5 нг-отборный

Question

Я использую компонент ng-select из https://github.com/ng-select/ng-select , Однако содержание раскрывающегося списка в некоторых случаях слишком длинное. Строка в раскрывающемся списке будет сокращена на ... Можно ли сделать раскрывающийся список больше ширины ввода в соответствии с длиной содержимого? Возможно, с помощью стилей CSS (на заказ).

<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

Answer 1

1. Добавить инкапсуляцию: ViewEncapsulation.Nonne.

2. Дайте ему название класса. И переопределить CSS, используя его

   .ng-select.custom .ng-value-container { высота: 10 пикселей; }

Здесь ng-select - это компонент, а custom - имя класса.

Answer 2

В CSS / SCSS (что вы используете для стиля) установите

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

Однако это не выглядит так хорошо ...

Альтернатива:

Удалите white-space: nowrap; из .ng-dropdown-panel .ng-dropdown-panel-items .ng-option, затем он разбивается на несколько строк.