How to make ng-select width to fit placeholder and items?

Question

I have the <nb-select> with the following placeholder:

<nb-select id="weather" placeholder="Expected Weather" fullWidth>
  <nb-option [value]="1">Dry</nb-option>
  <nb-option [value]="2">Wet</nb-option>
</nb-select>

I'm trying to set width to be able auto fit it content to show not only items but the placeholder too.

Tried to use 'fullWidth', but it works only for the options content:

Checked a few solutions from the following posts:

How to always display a placeholder of ng-select?

Make ng-select width adjust to selected items / available options?

Unfortunately it didn't work.

Thanks

score -1 · Accepted Answer · answered Dec 04 '22 at 08:51

The solution I found is to set min-width to 100% instead of using the fullWidth:

<nb-select placeholder="Expected Weather" [ngStyle]="{'min-width': '100%'}" id="weather">
  <nb-option [value]="1">Dry</nb-option>
  <nb-option [value]="2">Wet</nb-option>
</nb-select>

How to make ng-select width to fit placeholder and items?

1 Answers1