Semantic-ui下拉大小

Question

我们正在尝试将bootstrap传递给semantic-ui。

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

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

我不能用css改变任何输入或下拉的大小，也不能像微小，中等或大规模那样不断调整大小。

我不想改变下拉菜单的高度。有人可以帮忙吗？

Answer 1

你似乎有一个固定的高度元素。语义UI的默认下拉列表具有最小高度。您必须更改下拉元素的最小高度，但是，您还要负责更改内部元素以使其看起来更好。语义UI没有开箱即用提供了一种更改下拉列表高度的方法。

两种可能的替代方法是使用滚动或内联下拉列表变体。这两种方法都要求您更改标记。

请参阅https://jsfiddle.net/gfeedam1/2/

如果你真的想让下拉列表与包含元素的高度相同，你可以这样做：

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

Answer 2

尝试将！important 放在css height属性中。这可能有所帮助。

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