How to set the width of Semantic UI dropdown

Question

How can I set the width of the Semantic UI Search Selection drop down? I need to set the width of Semantic UI Search selection dropdown to the longest element in the dropdown. Any help will be appreciated.

Reflate

Answer 1

I used a fixed-size wrapper combined with a fluid (expands to fit size of parent) dropdown nested inside of it

<div style="width: 250px;">
  <div class="ui fluid dropdown">
    <input type="hidden" name="country">
    <div class="default text">My Dropdown Text</div>
  </div>
</div>

Atalante

Also add display:inline-block; to preserve the standard display setting – Ceramal

Answer 2

Try setting the min-width instead of setting the width. The default is a min-width of 14em, so you'll need to override that if you wish to have a smaller width.

Example:

.ui.dropdown.search{
     min-width: /*smaller width here*/;
}

Verbalism

That information was helpful to get the auto width (React) .ui.selection.dropdown { min-width: auto !important; } – Ice

Damn Alex... you saved the day. – Basion

Answer 3

Try using the 'compact' attribute as shown below. However it only adjusts the width based on what is selected.

<div class="ui compact selection dropdown">
  <i class="dropdown icon"></i>
  <div class="text">Compact</div>
  <div class="menu">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
  </div>
</div>

Uranium