13

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.

Barry Michael Doyle
  • 9,333
  • 30
  • 83
  • 143
Angular-User
  • 151
  • 1
  • 3
  • 7

3 Answers3

11

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>
myselfmiqdad
  • 2,518
  • 2
  • 18
  • 33
bjornl
  • 1,757
  • 3
  • 17
  • 29
6

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*/;
}
Mosia Thabo
  • 4,009
  • 1
  • 14
  • 24
Alex Gausman
  • 155
  • 1
  • 6
2

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>
AUHReem03
  • 31
  • 5