Autosize ng-select width to longest option width

[sebastian-zarzycki-apzumi]

Is your feature request related to a problem? Please describe.
Default <select> behavior is to size itself to the width of the longest option it contains. This allows for the select to stay fixed width throughout the process of selecting options and prevents "content jumping" in inline forms.

Describe the solution you'd like
Mimic regular select behavior. Currently, you can only set width by css, but you don't know the width of largest possible option during runtime and there's apparently no way to calculate that, as options are not in DOM, until clicked.

[varnastadeus]

I don't think this is good practice, usually your control is based on parents width or static width you define. Width based on longest option will result in miss-aligned UI and problems with overflowing content. I think this feature will add unnecessary complexity and extra calculations and the benefit won't outweigh the cost.

[sebastian-zarzycki-apzumi]

It's quite hilarious that you think that what the builtin system control does is "not a good practice". Yes, there are downsides to this, but not giving that option to users is ... unwise, to say the least. Hopefully, you'll change your mind.

[stefankip]

Yes I agree with @sebastian-zarzycki-es. It's your opinion vs. how the default behavior is at the moment.
What is your alternative for items which get cut off? The UX is bad because the options aren't readable.

[skrzepij]

+1.
In our project we have a versioning system. and current configuration (as first option) is short. But versions names can be quite long. Now, we cannot see full name of versions and this is a problem.

Buidin select controls in browsers adjust width depending to options and this is default behaviour.

[varnastadeus]

here is simple working scss solution

<ng-select class="auto-grow"></ng-select>

.ng-select.auto-grow {
  display: flex;

  .ng-select-container {
    min-width: 100px;
    width: auto;
  }

  .ng-dropdown-panel {
    width: auto;
  }
}

[mjarkk]

For Those who also want to change of the input width dynamically, it looks shit but hey it works

.ng-select.auto-grow {
  max-width: inherit;
  .ng-dropdown-panel {
    width: auto;
  }
}

[thesumitshrestha]

@sebastian-zarzycki-es adding ng-select { .ng-dropdown-panel { width: auto !important; } } in CSS, it works but I would like to suggest adding a tooltip while hovering making a substring than adding css.

<ng-template ng-option-tmp let-item="item">
        <div [ngbTooltip]="item.length > 15 ? item : ''" container="body">
          {{item.length > 15 ? (item| slice:0:15) + '..' : item}}
        </div>
</ng-template>

[CostinGabriel]

A little late to the party but it seems like now setting width:auto to .ng-dropdown-panel is not working anymore. Is there any other option to achieve the plain html select behavior?

[sebastian-zarzycki-apzumi]

It never really worked properly. It's not only about the dropdown, but also the container itself, because it has to hold the longest value, too, when selected.

[TheoLechemia]

Any news about this subject ?
The width is now set at the html level, so it's imposible to modify with a css style sheet as suggested ..

[boltex]

and dynamic classes are not sent through from the ng-select to the underlying opened dropdown underneath...! (with append to body) so its impossible to assign css to the opened dropdown!

:/

[dongmei-cao]

Here is my simple workaround to make the long option wrap into multiple lines

.ng-select  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
    white-space: normal !important;
  }