Connected listboxes / multiselect toolbar styling

[erwin]

Hi,

I'm trying to minimize the height of the listbox because of layout restrictions. Played around with css (beginner here) a little but need help on how I can reduce the spacing between toolbar buttons so that I can further reduce the height  - see attached image?

(Bootstrap 4 styling)

Kind regards

Erwin

[Georgi]

Hello Erwin,

The buttons have margin top by default. A possible solution to decrease the spacing is to adjust the margin as required.

e.g.

.k-listbox.k-listbox-toolbar-left .k-listbox-toolbar ul li, .k-listbox.k-listbox-toolbar-right .k-listbox-toolbar ul li{
  margin-top: 5px;  /*adjust based on requirements*/
}

Below you will find a small sample where the margin is decreased:

• https://dojo.telerik.com/ecEWOheq

Regards,
Georgi
Progress Telerik

[erwin]

Thanks Gerogi,

exactly what I needed.

Kind regards

Erwin