如何自动增加select2输入框的高度(多个) [英] How to automatically increase the height of select2 input box (multiple)

问题描述

我有一个用于multiselet选项的select2输入框，用户可以在其中选择任意数量的选项，如果所选择的选项占用的空间大于可用宽度，那么我想自动增加选择框的高度(不要(不需要滚动选项，所有选项都应在可见的空间中)，然后在下一行获得其余选项.当前选项在下一行，但是选择框的高度没有增加.

I have a select2 input box for multiselet option in which, user can select as many options as he wants, if the selected options are occupying more space than available width then I wanted to increase the height of the select box automatically (don't want scroll option, all options should be in viewable space) and get the remaining options in next line. Currently options are coming in the next line but the height of the select box is not increased.

如果我删除 .select2-container--default .select2-selection--multiple 类中的height属性，则它可以正常工作.但是我希望这个height属性可以控制选择框的初始高度.

If I remove the height property in the .select2-container--default .select2-selection--multiple class, it is working. But I want this height property to control the initial height of the select box.

以下是 .select2-container-默认.select2-selection-multiple 中不带高程属性的初始选择框高度，自动高度在这里非常合适.

Below is the initial select box height without heigh property in the .select2-container--default .select2-selection--multiple and the auto height works perfectly here.

.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/

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

推荐答案

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

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

更新的小提琴 ，我希望它对您有用，谢谢.

这篇关于如何自动增加select2输入框的高度(多个)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！