首页 文章

如何更改select2框高度

提问于
浏览
45

我喜欢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 回答

  • 1

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

    /* 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;
    }
    
  • 0

    试试这个,这对我有用:

    <select name="select_name" id="select_id" class="select2_extend_height wrap form-control" data-placeholder="----">
    <option value=""></option>
    <option value="1">test</option>
    </select>
    
    .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"});
    
  • 5

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

    问候 .

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

  • 5

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

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

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

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

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

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

  • 8
    .select2-selection__rendered {
        line-height: 31px !important;
    }
    .select2-container .select2-selection--single {
        height: 35px !important;
    }
    .select2-selection__arrow {
        height: 34px !important;
    }
    
  • 3

    您可能希望首先为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;}
    
  • 13

    快速简便,将其添加到您的页面:

    <style>
        .select2-results {
            max-height: 500px;
        }
    </style>
    
  • 1

    编辑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%);
    }
    
  • 22

    这对我有用

    .select2-container--default .select2-results>.select2-results__options{
        max-height: 500px;
    }
    
  • 1

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

    .select2-container .select2-choice {
        display: block!important;
        height: 36px!important;
        white-space: nowrap!important;
        line-height: 26px!important;
    }
    
  • -1

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

    .select2-container .select2-choice, .select2-result-label {
      font-size: 1.5em;
      height: 41px; 
      overflow: auto;
    }
    
    .select2-arrow, .select2-chosen {
      padding-top: 6px;
    }
    

    之前:

    enter image description here

    enter image description here

    之后:
    select-2 enabled dropdown with css-defined height

    enter image description here

  • 1

    这是我对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');
    });
    
  • 0

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

    .select2-container--default .select2-results > .select2-results__options {
        max-height: 200px
    }
    
  • 6

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

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

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

  • 6

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

    .select2-container .select2-selection {
      height: 34px; 
    }
    

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

  • 1

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

    .select2-selection {
        min-height: 10px !important;
    }
    

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

  • 0

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

    .select2-container .select2-selection, 
    .select2-selection__rendered, 
    .select2-selection__arrow {
        height: 48px !important;
        line-height: 48px !important;
    }
    
  • -1

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

    .select2-selection.select2-selection--multiple {
        min-height: 25px;
        max-height: 25px;
    }
    
  • 18

    我在这里找到的懒人解决方案https://github.com/panorama-ed/maximize-select2-height

    maximize-select2-height

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

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

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

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

    请享用!

  • 2

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

    这正是这段代码的作用:

    $('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 .

相关问题