[BUG] ListBox toolbar not rendering issues

[yanmariomenev]

Bug Description

The toolbar buttons and spacing are too large and extend beyond the listbox component, causing rendering issues. In Angular and React, the rendering breaks differently because the toolbar’s height exceeds the component’s list, while in jQuery, it might cause the list to be rendered under the second list.

Changing the height of the component can help, but without any styles involved, there shouldn’t be any rendering issues.

Steps to Reproduce

Steps to reproduce the behavior:

https://stackblitz.com/edit/angular-mrwf6sng?file=src%2Fapp%2Fapp.component.ts

https://stackblitz.com/edit/react-dutmjugp?file=app%2Fapp.tsx,app%2Fmain.tsx

Or open any of our online demos for the ListBox and change the theme to Bootstrap or Material.

Expected Behavior

Toolbar to be aligned and rendered like the default theme.

Screenshots/Videos

If applicable, add screenshots or videos to help explain your problem.

Environment Information

Affected Theme(s)

• All themes
• Default theme
• Bootstrap theme
• Material theme
• Fluent theme
• Classic theme

Affected Component(s)

Please specify the component(s) where the bug occurs: ___________

Affected Suites

• Kendo UI for jQuery
• Kendo UI for Angular
• Kendo UI for React
• Kendo UI for Vue
• Telerik UI for Blazor
• Telerik UI for ASP.NET Core
• Telerik UI for ASP.NET MVC

Browser Information

• All browsers
• Chrome (version: _______)
• Firefox (version: _______)
• Safari (version: _______)
• Edge (version: _______)