'SumoSelect's select-all option overlaps other options in select drop down

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: enter image description here

javascriptphpjquerycodeignitersumoselect.js


Solution 1:[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');

});

enter image description here

Solution 2:[2]

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

Solution 3:[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;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Usman Farooq
Solution 2 user18305131
Solution 3 Jeroen Heier

Related Questions