CODEWITHSUNDEEP
javascriptasp.netsemantic-ui
Angular-User
Angular-User

Reputation: 161

How to set the width of Semantic UI dropdown

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.

Upvotes: 14

Views: 13611

Answers (3)

AUHReem03
AUHReem03

Reputation: 31

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>

Upvotes: 2

Alex Gausman
Alex Gausman

Reputation: 175

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*/;
}

Upvotes: 8

bjornl
bjornl

Reputation: 1926

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>

Upvotes: 11

Related Questions