I'm submitting a ... (check one with "x")
Current behavior:
I have a row with two columns. While NbInput elements adapt properly to the column div, the NbSelect does not.
Screenshot:

Parent col bounds:

Expected behavior:
The NbSelect element should adapt to the parent column div as the NbInput element does.
Related code:
My template:
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="form-group">
<nb-form-field>
<nb-select [formControl]="day" placeholder="Select Day" [selected]="'Today'"
[shape]="componentShape" [size]="componentSize" fullWidth>
<nb-option [value]="'Today'">Today</nb-option>
<nb-option [value]="'Tomorrow'">Tomorrow</nb-option>
</nb-select>
</nb-form-field>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="form-group">
<nb-form-field>
<nb-icon nbPrefix icon="clock-outline" pack="eva"></nb-icon>
<input [formControl]="time" fullWidth nbInput type="text" placeholder="Enter time"
[status]="elementStatus(time)" [shape]="componentShape"
[nbAutocomplete]="timeAutocomplete" [fieldSize]="componentSize"/>
<nb-autocomplete #timeAutocomplete>
<nb-option *ngFor="let t of (filteredTimeOptions$ | async)" [value]="t">
{{ t }}
</nb-option>
</nb-autocomplete>
</nb-form-field>
</div>
</div>
</div>
npm, node, OS, Browser
Node, npm: v13.6.0, 6.14.2
OS: macOS Catalina
Browser: Chrome
Angular, Nebular
"@angular/core": "~9.0.6",
"@nebular/theme": "^5.0.0",
We're experiencing the same problem. There is a min-width: 13rem on the .select-button inside the ng-select that the fullWidth directive doesn't seem to override.
The workaround was to remove that min-width manually:
nb-select ::ng-deep {
.select-button {
min-width: 0;
}
}
I've the same problem and I have no idea how to solve it. 馃 馃檨馃檨馃檨馃檨 馃
Most helpful comment
We're experiencing the same problem. There is a
min-width: 13remon the.select-buttoninside theng-selectthat thefullWidthdirective doesn't seem to override.The workaround was to remove that
min-widthmanually: