DropdownList Grouping with Bootstrap 5 Theme issues

[Carl]

When using the Bootstrap 5 theme with the dropdown list and grouping, the categories used for grouping are not highlighted and the items within the groups are not indented. This can be seen on the Syncfusion Blazor demo for dropdownlist by changing the themes.

How can I get same hightlighting and indentation with Bootstrap 5?

[Ponmani Murugaiyan]

Hi Carl, 

Query: The categories used for grouping are not highlighted and the items within the groups are not indented. 

 

We suggest you to override the below styles to achieve your requirement. Please find the attached sample below for reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dropdown_Grouping1544648064 

<style> 

    .e-dropdownbase.e-dd-group .e-list-item { 

        text-indent: 15px; 

    } 

    .e-dropdownbase .e-list-group-item, .e-fixed-head { 

        color: blue; 

    } 

</style> 

 

Regards, 

Ponmani M 

[Carl]

Thank you this did what I needed.

Is there documentation available for all components CSS somewhere?  I know that some components contain some CSS documentation but not all components.  I couldn't find any documentation regarding the dropdownlist for example.  Having the documentation would be very helpful,

Thanks again for your help.

[Ponmani Murugaiyan]

Hi Carl,

We are glad to hear that the issue has been resolved. We will include the CSS documentation for all components soon in our end.

Regards,

Ponmani M