语义-ui 下拉大小调整

Question

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

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

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

我无法更改任何输入或下拉菜单的大小，既不能使用 css 也不能使用恒定大小（如小、中或大）。

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

Answer 1

尝试将 !important 放在您的 css 高度 属性 中。可能会有帮助。

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

Answer 2

您似乎有一个固定高度的元素。 Semantic UI 的默认下拉菜单有一个最小高度。您必须更改下拉元素的最小高度，但是，您也有责任更改内部元素以使其看起来更漂亮。语义 UI 没有开箱即用地提供更改下拉列表高度的方法。

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

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

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

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