web-dev-qa-db-ja.com

Angular 5 ng-select

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
angularangular-ngselect
2
Dev Db

CSS/SCSS（スタイリングに使用しているもの）セット

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

しかし、それはそれほど良く見えません...

enter image description here

代替：

削除する white-space: nowrap; from .ng-dropdown-panel .ng-dropdown-panel-items .ng-option次に、複数の行に分割されます。

enter image description here

3
Stefan
  1. カプセル化を追加します：ViewEncapsulation.None。
  2. クラス名を付けます。そしてそれを使用してCSSをオーバーライドします
.ng-select.custom .ng-value-container
    {
      height: 10px;
    }

ここで、ng-selectはコンポーネントであり、customはクラス名です。

0
user3847870