javascript - How to set the width of Semantic UI dropdown - Stack Overflow

admin管理员组

文章数量:1298477

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.

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.

• javascript
• asp.net
• semantic-ui

Share Improve this question Follow edited Mar 13, 2017 at 13:08 Barry Michael Doyle 10.6k3232 gold badges9696 silver badges159159 bronze badges asked Mar 12, 2017 at 16:49 Angular-UserAngular-User 16111 gold badge33 silver badges77 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 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>

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

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>

本文标签： javascriptHow to set the width of Semantic UI dropdownStack Overflow