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

Posted 2023-05-08

【中文标题】SumoSelect 的全选选项与选择下拉菜单中的其他选项重叠

【英文标题】：SumoSelect's select-all option overlaps other options in select drop down

【发布时间】：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>

重叠问题：

【问题讨论】：

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

【参考方案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;