This is a migrated thread and some comments may be shown as answers.

Connected listboxes / multiselect toolbar styling

2 Answers 56 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
erwin
Top achievements
Rank 1
Veteran
erwin asked on 22 Aug 2018, 02:31 PM

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

2 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 24 Aug 2018, 10:40 AM
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:



Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
erwin
Top achievements
Rank 1
Veteran
answered on 24 Aug 2018, 11:50 AM

Thanks Gerogi,

exactly what I needed.

Kind regards

Erwin

Tags
ListBox
Asked by
erwin
Top achievements
Rank 1
Veteran
Answers by
Georgi
Telerik team
erwin
Top achievements
Rank 1
Veteran
Share this question
or