我喜欢https://github.com/ivaynberg/select2中的select2框我使用format:选项来格式化每个元素,它看起来很棒 .
一切都很好,除了由于图像选定的元素大于选择框的高度 .
我知道如何更改宽度,但是如何更改高度以便在选择元素之后,它会显示完整的内容(约150px)
这是我的启蒙:
<script>
$("#selboxChild").select2({
matcher: function(term, text) {
var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text);
return t.toUpperCase().indexOf(term.toUpperCase()) >= 0;
},
formatResult: formatChild,
formatSelection: formatChild,
escapeMarkup: function(m) {
return m;
}
});
</script>
这是我的选择框
<select id="selboxChild" style="width: 300px; height: 200px">
<option value="">No child attached</option>
</select>
To Clarify: I do NOT want the Height of each option to change 我正在寻找选择框以在您选择孩子后更改身高 .
因此,当页面首次加载时,显示“未选择子项”当您单击下拉菜单并选择一个孩子时,您会看到孩子的图像 . 现在我需要选择框来扩展!否则孩子的照片会被切断 .
有人明白吗?
20 回答
上述解决方案均不适合我 . 这是我的解决方案:
试试这个,这对我有用:
您无需更改所有select2的高度 - 正在复制源
<input>
类select2-container,因此您可以按输入类对其进行样式设置 . 例如,如果要设置select2的某些实例的高度样式,请将class your-class添加到source<select>
element,然后在CSS文件中使用“.select2-container .your-class
” .问候 .
存在一些问题:不复制类名为
select2*
.你可以用一些简单的CSS来做到这一点 . 根据我的阅读,您希望使用“select2-choices”类设置元素的高度 .
这应该给你一个150px的设置高度,如果需要它将滚动 . 只需调整高度,直到您的图像符合要求 .
您还可以使用css设置select2结果的高度(选择控件的下拉部分) .
200px是默认高度,因此请将其更改为所需的下拉高度 .
您可能希望首先为select2提供一个特殊类,然后仅修改该类的css,而不是在全站点更改所有select2 css .
SCSS
快速简便,将其添加到您的页面:
编辑select2.css文件 . 转到高度选项并更改:
这对我有用
所选答案是正确的,但您不必编辑select2.css文件 . 您可以将以下内容添加到您自己的自定义css文件中 .
我来到这里寻找一种方法来指定启用select2的下拉列表的高度 . 这对我有用:
之前:
之后:
这是我对Carpetsmoker的回答(我喜欢它因为它是动态的),清理并更新为select2 v4:
似乎样式表选择器随着时间的推移而发生了变化 . 我正在使用select2-4.0.2和正确的选择器来设置当前的框高度:
我知道这个问题已经过时了,但是我在2017年寻找同一个问题的解决方案并且自己找到了一个 .
这将根据内容动态调整输入的高度 .
在select2.css之后排队另一个css文件,并在该css中添加以下内容:
即如果您希望选择框高度的高度为34px .
我有一个类似的问题,大多数这些解决方案都很接近,但没有雪茄 . 这是最简单的形式:
您可以将最小高度设置为您想要的任何高度 . 高度将根据需要扩大 . 我个人发现填充有点不 balancer ,字体太大,所以我也在这里添加了 .
在4.0.6,下面是适合我的解决方案 . 必须包含
select2-selection__rendered
和select2-selection__arrow
才能垂直对齐下拉标签和箭头图标:我正在使用Select2 4.0 . 这适合我 . 我只有一个Select2控件 .
我在这里找到的懒人解决方案https://github.com/panorama-ed/maximize-select2-height
maximize-select2-height
这个包很简单 . 它神奇地扩展了您的Select2下拉菜单以填充窗口的高度 .
它会影响下拉列表中元素的数量,页面上Select2的位置,页面的大小和滚动位置,滚动条的可见性以及下拉列表是向上还是向下呈现 . 每次打开下拉列表时它都会自行调整大小 . 并且缩小,它是~800字节(包括注释)!
(请注意,此插件仅适用于Select2 v4.x.x.)
请享用!
恕我直言,将高度设置为固定数字很少是有用的事情 . 将其设置为屏幕上可用的任何空间都非常有用 .
这正是这段代码的作用:
我为select2 3.5做了这个 . 我没有用4.0测试它,但是从文档中可能也适用于4.0 .