Angular 5 ng-select

Question

我正在使用https://github.com/ng-select/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

在 CSS/SCSS（你用於樣式的東西）集合中

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

不過好像不太好...

選擇：

刪除white-space: nowrap; 從.ng-dropdown-panel .ng-dropdown-panel-items .ng-option然后它分成多行。

Answer 2

1. 添加封裝：ViewEncapsulation.None。
2. 給它一個類名。 並使用它覆蓋 CSS

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

這里 ng-select 是組件，custom 是類名。