Select width changes according to the selected item

[smartm0use]

Hello, I have a select with some items. Some of these could be pretty long and if users select them the select become longer. And if they select again a short item the select width changes again. How can I avoid this behaviour and have select with a fixed width?

Here is my code: https://codepen.io/smartm0use_/pen/wvBPyEB

[lubber-de]

Adjust the CSS for the underlying .text according to your needs:

.ui.fixed.dropdown .text {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

See https://jsfiddle.net/4w26qvr9/

[smartm0use]

Could using "fixed" as class be an improvement for Fomantic-UI select/dropdown?

[lubber-de]

Maybe, but i am unsure about the fixed value. In my example i used 150px for testing purposes only

[smartm0use]

Unfortunately this breaks ui equal width form :(

[lubber-de]

Sure, thats the purpose of equal width to automatically adjust the form elements width. Your request was seeking for some fixed width independent of the dropdowns content.

[smartm0use]

Uhm, so in this case my request is always make ellipsis for text of the selected item that is longer than the select. Anyway avoid that the contect of select/dropdown change the size of the select/dropdown.

[ko2in]

Closed since @lubber-de already provided the solution. Please feel free to reopen or create a separate issue if you've any feature request for this.