davidstutz / bootstrap-multiselect

JQuery multiselect plugin based on Twitter Bootstrap.
https://davidstutz.github.io/bootstrap-multiselect/
Other
3.68k stars 1.98k forks source link

Optgroups won't indent subitems despite indentGroupOptions set to true #1238

Open ajck2 opened 2 years ago

ajck2 commented 2 years ago

I've got about 830 items in my bootstrap-multiselect menu and 4 optgroups defined within that, with a few subitems in each. I'm finding the subitems in the optgroup are not indenting when displayed in the menu so that it's impossible to tell which items are in the optgroup and which are regular items after it (before is OK as the optgroup header is in bold). I'm using v0.9.15 (have to use Bootstrap 3 with this project).

selection

In this example the four items following the app_hlrlist bold header should be indented as they are in the optgroup. The relevant bit of HTML supplied to the multiselect plugin is as follows (I've added two lines of regular options before and after the optgroup to show context):

<option value="app_fwdtonumber_isdn_country" data-type="string" data-encrypted="0">app_fwdtonumber_isdn_country</option>
<option value="app_fwdtonumber_isdn_countrycode" data-type="string" data-encrypted="0">app_fwdtonumber_isdn_countrycode</option>
<optgroup label="app_hlrlist">
<option value="app_hlrlist.app_hlrlist_hlrs_imsi" data-type="string" data-encrypted="E" data-arrayname="app_hlrlist">app_hlrlist_hlrs_imsi</option>
<option value="app_hlrlist.app_hlrlist_hlrs_imsi_operator" data-type="string" data-encrypted="U" data-arrayname="app_hlrlist">app_hlrlist_hlrs_imsi_operator</option>
<option value="app_hlrlist.app_hlrlist_hlrs_imsi_mcc" data-type="string" data-encrypted="U" data-arrayname="app_hlrlist">app_hlrlist_hlrs_imsi_mcc</option>
<option value="app_hlrlist.app_hlrlist_hlrs_imsi_mnc" data-type="string" data-encrypted="U" data-arrayname="app_hlrlist">app_hlrlist_hlrs_imsi_mnc</option>
</optgroup>
<option value="app_numofreqvectors" data-type="bigint" data-encrypted="0">app_numofreqvectors</option>
<option value="app_reqnodetype" data-type="string" data-encrypted="0">app_reqnodetype</option>

My multiselect configuration and initialisation is:

    $('#my_menu')
        .empty()
        .append(options)
        .show()
        .multiselect({
            maxHeight: 400, 
            numberDisplayed: 1,
            enableFiltering: true, 
            enableCaseInsensitiveFiltering: true,
            filterPlaceholder: 'Search',
            enableCollapsibleOptGroups: false,
            enableClickableOptGroups: false,
            indentGroupOptions: true
            });
    $('.multiselect-container .multiselect-filter').css({'position': 'sticky', 'top': '0px', 'z-index': 1 }); // Fix search box to top

Is there a way I can patch the multiselect list before or after rendering, to fix this please? (or alternatively the code itself but that's less useful as ideally I need to have the multiselect plugin come from CDN).

Thanks