SumoSelect 的全选选项与选择下拉菜单中的其他选项重叠答案

【问题标题】：SumoSelect's select-all option overlaps other options in select drop downSumoSelect 的全选选项与选择下拉菜单中的其他选项重叠
【发布时间】：2018-09-22 04:07:26
【问题描述】：

我的CodeIgniter 应用程序中有一个SumoSelect 选择下拉菜单，其中select all 选项与其他项目相比具有较小的高度，因此，select all 选项与下拉菜单中的其他选项重叠下列表。我曾尝试使用jQuery 增加select-all 选项元素的高度，但我认为<option> 的高度无法手动修改。那么请告诉如何解决这个重叠问题？

代码：

<select name="type" id="type" multiple="multiple" placeholder="Select a type" class="form-control SlectBox">                          
    <?php foreach($types as $type) { ?>
        <option>$type</option>
    <?php } ?>
</select>

<script>
    $(document).ready(function() {
        window.asd = $('.SlectBox').SumoSelect({ 
            csvDispCount: 3,
            selectAll: 1,
            captionFormat: '{0} types selected!',
            captionFormatAllSelected:'All {0} types selected!'
        }); 
        <?php if(count(array_filter($Type_list))==0){?>
            $('select.SlectBox')[0].sumo.selectAll();
        <?php } ?>      
    });
</script>

重叠问题：

【问题讨论】：

我有同样的问题，你发现你发现它是什么了吗，如果是，请分享并回答你自己的问题。

标签： javascript php jquery codeigniter sumoselect.js

【解决方案1】：

这是一种解决方法。捕捉sumo select的opening事件，用jquery动态设置第一个元素的高度。

$('#EmployeeType').on('sumo:opening', function () {

    $('.select-all').css('height', '35px');

});

【讨论】：

【解决方案2】：

添加这个 css 类并调整高度和内边距 .form-group >.SumoSelect.open >.optWrapper>.select-all {height: 50px;padding: 6px 35px;}

【讨论】：

【解决方案3】：

作为 Firefox 中的快速修复，此解决方案对我有用。我在页面的 css 文件中添加了以下样式。

.SumoSelect .select-all {
  display: table-cell;
}

【讨论】：