Semantic-ui dropdown sizing

Question

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 ?

You say you can’t change the size – please amend what you already tried to achieve your goal in CSS. — Marijan, Apr 26 '17 at 12:54
Did you try to inspect the element with your browsers developer tools and see which styles are applied? Really hard to help since we almost know nothing about your markup. — Marijan, Apr 26 '17 at 13:00
Your dropdown seems to be wrapped into a navbar ? Try to set the `height:auto` — Zooly, Apr 26 '17 at 13:02
Can you give me example of sizing a dropdown in semantic-ui ? — Hüseyin Babuc, Apr 26 '17 at 13:02
height:auto didn't change anything, is there any function in semantic-ui for sizing or any technic ? — Hüseyin Babuc, Apr 26 '17 at 13:07

score 2 · Accepted Answer · answered Oct 09 '17 at 12:32

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

score 0 · Answer 2 · answered Apr 26 '17 at 13:29

0

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>

answered Apr 26 '17 at 13:29

Smita Jain

46
1
5

I tried that too, semantic-ui creates a div and put select tag in it. – Hüseyin Babuc Apr 26 '17 at 14:06

Semantic-ui dropdown sizing

2 Answers2

Linked