Nebular: NbSelect element width does not adapt correctly

Created on 18 Mar 2020  路  2Comments  路  Source: akveo/nebular

Issue type

I'm submitting a ... (check one with "x")

  • [x] bug report
  • [ ] feature request

Issue description

Current behavior:
I have a row with two columns. While NbInput elements adapt properly to the column div, the NbSelect does not.

Screenshot:
Screenshot 1

Parent col bounds:
Screenshot 2

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>

Other information:

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",

Most helpful comment

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;
  }
}

All 2 comments

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. 馃 馃檨馃檨馃檨馃檨 馃

Was this page helpful?
0 / 5 - 0 ratings

Related issues

VictorSchleumer picture VictorSchleumer  路  4Comments

rhajizadeh picture rhajizadeh  路  3Comments

batousik picture batousik  路  4Comments

aqsdc1 picture aqsdc1  路  3Comments

bnbs picture bnbs  路  4Comments