如何自动增加select2输入框的高度(多个)

Question

我有一个用于multiselet选项的select2输入框,用户可以根据需要选择多个选项,如果所选选项占用的空间比可用宽度多,那么我想自动增加选择框的高度(不想要滚动选项,所有选项都应在可视空间中)并在下一行中获取剩余选项.目前选项将在下一行中出现,但选择框的高度不会增加.

如果我删除.select2-container中的height属性- 默认.select2-selection - 多个类,它就可以了.但是我想要这个height属性来控制选择框的初始高度.

下面是.select2-container中没有高度属性的初始选择框高度- 默认.select2-selection - 多个,自动高度在这里完美运行.

.select2-container--default .select2-selection--multiple {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  cursor: text;
  height: 22px;
}

JSFiddle:https://jsfiddle.net/rd62bhbm/

Answer 1

将此CSS添加到select2-selection--multiple类:

.select2-selection--multiple{
    overflow: hidden !important;
    height: auto !important;
}

更新了小提琴,我希望它适合你,谢谢.