java修改下拉框样式_如何更改select2框高度

回答(20)

2 years ago

你可以用一些简单的CSS来做到这一点 . 根据我的阅读，您希望使用“select2-choices”类设置元素的高度 .

.select2-choices {

min-height: 150px;

max-height: 150px;

overflow-y: auto;

}

这应该给你一个150px的设置高度，如果需要它将滚动 . 只需调整高度，直到您的图像符合要求 .

您还可以使用css设置select2结果的高度(选择控件的下拉部分) .

ul.select2-results {

max-height: 200px;

}

200px是默认高度，因此请将其更改为所需的下拉高度 .

2 years ago

.select2-selection__rendered {

line-height: 31px !important;

}

.select2-container .select2-selection--single {

height: 35px !important;

}

.select2-selection__arrow {

height: 34px !important;

}

2 years ago

您可能希望首先为select2提供一个特殊类，然后仅修改该类的css，而不是在全站点更改所有select2 css .

$("#selboxChild").select2({ width: '300px', dropdownCssClass: "bigdrop" });

SCSS

.bigdrop.select2-container .select2-results {max-height: 200px;}

.bigdrop .select2-results {max-height: 200px;}

.bigdrop .select2-choices {min-height: 150px; max-height: 150px; overflow-y: auto;}

2 years ago

编辑select2.css文件 . 转到高度选项并更改：

.select2-container .select2-choice {

display: block;

height: 36px;

padding: 0 0 0 8px;

overflow: hidden;

position: relative;

border: 1px solid #aaa;

white-space: nowrap;

line-height: 26px;

color: #444;

text-decoration: none;

border-radius: 4px;

background-clip: padding-box;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

background-color: #fff;

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));

background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);

background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);

background-image: -o-linear-gradient(bottom, #eee 0%, #fff 50%);

background-image: -ms-linear-gradient(top, #fff 0%, #eee 50%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);

background-image: linear-gradient(top, #fff 0%, #eee 50%);

}

2 years ago

这对我有用

.select2-container--default .select2-results>.select2-results__options{

max-height: 500px;

}

2 years ago

所选答案是正确的，但您不必编辑select2.css文件 . 您可以将以下内容添加到您自己的自定义css文件中 .

.select2-container .select2-choice {

display: block!important;

height: 36px!important;

white-space: nowrap!important;

line-height: 26px!important;

}

2 years ago

我来到这里寻找一种方法来指定启用select2的下拉列表的高度 . 这对我有用：

.select2-container .select2-choice, .select2-result-label {

font-size: 1.5em;

height: 41px;

overflow: auto;

}

.select2-arrow, .select2-chosen {

padding-top: 6px;

}

之前：

之后：

2 years ago

这是我对Carpetsmoker的回答(我喜欢它因为它是动态的)，清理并更新为select2 v4：

$('#selectField').on('select2:open', function (e) {

var container = $(this).select('select2-container');

var position = container.offset().top;

var availableHeight = $(window).height() - position - container.outerHeight();

var bottomPadding = 50; // Set as needed

$('ul.select2-results__options').css('max-height', (availableHeight - bottomPadding) + 'px');

});

2 years ago

似乎样式表选择器随着时间的推移而发生了变化 . 我正在使用select2-4.0.2和正确的选择器来设置当前的框高度：

.select2-container--default .select2-results > .select2-results__options {

max-height: 200px

}

2 years ago

我知道这个问题已经过时了，但是我在2017年寻找同一个问题的解决方案并且自己找到了一个 .

.select2-selection {

height: auto !important;

}

这将根据内容动态调整输入的高度 .

2 years ago

在select2.css之后排队另一个css文件，并在该css中添加以下内容：

.select2-container .select2-selection {

height: 34px;

}

即如果您希望选择框高度的高度为34px .

2 years ago

我有一个类似的问题，大多数这些解决方案都很接近，但没有雪茄 . 这是最简单的形式：

.select2-selection {

min-height: 10px !important;

}

您可以将最小高度设置为您想要的任何高度 . 高度将根据需要扩大 . 我个人发现填充有点不 balancer ，字体太大，所以我也在这里添加了 .

2 years ago

在4.0.6，下面是适合我的解决方案 . 必须包含 select2-selection__rendered 和 select2-selection__arrow 才能垂直对齐下拉标签和箭头图标：

.select2-container .select2-selection,

.select2-selection__rendered,

.select2-selection__arrow {

height: 48px !important;

line-height: 48px !important;

}

2 years ago

我正在使用Select2 4.0 . 这适合我 . 我只有一个Select2控件 .

.select2-selection.select2-selection--multiple {

min-height: 25px;

max-height: 25px;

}

2 years ago

maximize-select2-height

这个包很简单 . 它神奇地扩展了您的Select2下拉菜单以填充窗口的高度 .

它会影响下拉列表中元素的数量，页面上Select2的位置，页面的大小和滚动位置，滚动条的可见性以及下拉列表是向上还是向下呈现 . 每次打开下拉列表时它都会自行调整大小 . 并且缩小，它是~800字节(包括注释)！

(请注意，此插件仅适用于Select2 v4.x.x.)

$("#my-dropdown").select2().maximizeSelect2Height();

请享用！

2 years ago

恕我直言，将高度设置为固定数字很少是有用的事情 . 将其设置为屏幕上可用的任何空间都非常有用 .

这正是这段代码的作用：

$('select').on('select2-opening', function() {

var container = $(this).select2('container')

var position = $(this).select2('container').offset().top

var avail_height = $(window).height() - container.offset().top - container.outerHeight()

// The 50 is a magic number here. I think this is the search box + other UI

// chrome from select2?

$('ul.select2-results').css('max-height', (avail_height - 50) + px)

})

我为select2 3.5做了这个 . 我没有用4.0测试它，但是从文档中可能也适用于4.0 .

2 years ago

上述解决方案均不适合我 . 这是我的解决方案：

/* Height fix for select2 */

.select2-container .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__arrow {

height: 35px;

}

.select2-container--default .select2-selection--single .select2-selection__rendered {

line-height: 35px;

}

2 years ago

试试这个，这对我有用：

test

.wrap.select2-selection--single {

height: 100%;

}

.select2-container .wrap.select2-selection--single .select2-selection__rendered {

word-wrap: break-word;

text-overflow: inherit;

white-space: normal;

}

$('.select2_extend_height').select2({containerCssClass: "wrap"});

2 years ago

您无需更改所有select2的高度 - 正在复制源 类select2-container，因此您可以按输入类对其进行样式设置 . 例如，如果要设置select2的某些实例的高度样式，请将class your-class添加到source element，然后在CSS文件中使用“.select2-container . your-class ” .

问候 .

存在一些问题：不复制类名为 select2* .

2 years ago

快速简便，将其添加到您的页面：

.select2-results {

max-height: 500px;

}