Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NbSelect element width does not adapt correctly

See original GitHub issue

Issue type

I’m submitting a … (check one with “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",

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

7reactions

kdubbcommented, Jun 13, 2020

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

0reactions

kdubbcommented, Sep 26, 2021

@katebatura That is not “fixed”, you are offering a workaround. The default style is broken and the theme itself should be fixed. You are expecting every person using the theme to find this issue and apply the workaround themselves?

What’s wrong with incorporating some version of my style edit into the theme itself?

Top Results From Across the Web

How can I centralize <nb-select> control - Stack Overflow

I'm trying to use <nb-select> . I couldn't centralize the control, once it as been inside another tag, <div class="input-group"> , ...

Configuration - Sphinx documentation

This file (containing Python code) is called the “build configuration file” and contains (almost) all configuration needed to customize Sphinx input and output ......

Gmsh 4.11.1

Embedded model entities and general mesh size fields (see Specifying mesh element sizes) are currently only supported by the “Delaunay” and “HXT” algorithms....

Analyzing RNA-seq data with DESeq2 - Bioconductor

The DESeq2 model internally corrects for library size, so transformed or normalized values such as counts scaled by library size should not ......

Vaccine Storage and Handling Toolkit | CDC

If the cold chain is not properly maintained, vaccine potency may be lost, ... An effective cold chain relies on three main elements:....