Угловой 5 ng-select
Я использую компонент 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
Ответы 2
В CSS / SCSS (что вы используете для стилизации) установите
.ng-dropdown-panel {
min-width: 100%;
}
Однако это выглядит не очень хорошо ...
Альтернатива:
Удалите white-space: nowrap; из .ng-dropdown-panel .ng-dropdown-panel-items .ng-option, тогда он разбивается на несколько строк.
@ J.D Чтобы изменить стиль white-space: ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option { white-space: normal; }
- Добавить инкапсуляцию: ViewEncapsulation.None.
- Дайте ему имя класса. И переопределите CSS, используя его
.ng-select.custom .ng-value-container
{
height: 10px;
}Здесь ng-select - это компонент, а custom - это имя класса.
Пытался сменить стиль, но у меня не получается. Немного изменил демо страницы на гитхабе. Вы видите, как это сделать здесь? stackblitz.com/edit/ng-select-2u7ces