Angular 5 ng-select

Question

I am using ng-select component from https://github.com/ng-select/ng-select . However the content of the dropdown is in some cases too long. The string in the dropdown will be shortened with ... Is it possible to make the dropdown bigger than the input width, according to the length of the content? Possibly with CSS styling (custom).

<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

In the CSS/SCSS (what you are using for styling) set

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

However it doesn't look that good...

Alternative:

Remove white-space: nowrap; from .ng-dropdown-panel .ng-dropdown-panel-items .ng-option then it breaks into multiple lines.

Answer 2

1. Add encapsulation: ViewEncapsulation.None.
2. Give it a class name. And override the CSS using it

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

Here ng-select is the component and custom is the class name.