Semantic-UI searchable dropdown width

[srikalak]

How to set the width of dropdown to max width of available options in that dropdown instead of the width of first element. Every time the width of drop down is set to the first element or the selected element of dropdown. But i would like to set it to the width of max width of available option in that dropdown. Also all the dropdowns are set to same width in the same page but it shouldnt be like that.

[awgv]

Hi @srikalak, can you please somehow elaborate?

[srikalak]

let me explain with an example here are 2 dropdowns
1) First dropdown options

• Alabama
• Alaska
• This should be really long text to see the width of dropdown
• Arizona

2) second dropdown options

• Alabama
• Alaska
• blah blah blah blah
• Arizona

all i want is to set the width of first drop down to the width of option "This should be really long text to see the width of dropdown" as this is longest text in the options of first drop down options, and set the width of second dropdown to the width of "blah blah blah blah" as this is the longest text in second dropdown option. how do i do this while using semantic UI search drodown? as it sets both dropdown to same size and i dont want that, or to the width of text that is selected or top most option. all iwant is to set the width as traditional dropdown while using semantic UI

[Giwayume]

What you're asking for would be a very performance-expensive Javascript solution. The library would have to loop through each dropdown item, set it as the current value, and calculate the width of the the dropdown for each item.

Instead, you could just specify a custom width yourself with inline styles.
<div class="ui search dropdown selection" style="width:300px">

What you're trying to do is not compatible responsive web design.

[rjworks]

it doesn't change the width