Semantic-ui dropdown sizing

问题

We are trying to passing bootstrap to semantic-ui.

    <select id="sayfaArama" class="ui search dropdown">
     <option value="">Sayfalarda ara...</option>
    </select>

https://i.stack.imgur.com/wXAVS.png

I can't change the size of any input or dropdown neither with css nor constant sizing like tiny,medium or massive.

I wan't to change the height of the dropdown. Can anybody help ?

回答1:

You seem to have a fixed height element. Semantic UI's default dropdown has a min-height. You must change the min-height on the dropdown element however, you are responsible for changing the internal elements as well to make it look nice. Semantic UI does not out of the box provide a way to change the height of the dropdown.

Two possible alternatives are to use the scrolling or inline dropdown variations. Both of the alternatives require you to change your markup.

See https://jsfiddle.net/gfeedam1/2/

If you really want to make the dropdown the same height as the containing element you can do something like:

.change-height-of-dropdown {
  min-height: auto !important;
  height: 1em;
}

回答2:

Try to put !important in your css height property. It may help.

<select id="sayfaArama" class="ui search dropdown" style='height:50px !important'>
 <option value="">Sayfalarda ara...</option>
</select>

来源：https://stackoverflow.com/questions/43634804/semantic-ui-dropdown-sizing