SumoSelect 的全选选项与 select 下拉列表中的其他选项重叠

Question

I have a SumoSelect select drop down in my CodeIgniter application and inside that the select all option has smaller height as compared to other items, and due to this, select all option overlaps other option in the drop down list. I have tried to increase the height of select-all option element using jQuery but I think the height of <option> can not be modified manually. So please tell how to resolve this overlapping issue?

Code:

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

Overlapping Issue:

Answer 1

Here is a workaround. Catch the opening event of sumo select and dynamically set the height of first element with jquery.

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

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

});

Answer 2

Add this css class and adjust height and padding.form-group >.SumoSelect.open >.optWrapper>.select-all {height: 50px;padding: 6px 35px;}

Answer 3

As a quick fix in Firefox, this solution worked for me. I added the following style to my css file for the page.

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