Connected listboxes / multiselect toolbar styling

3 posts, 0 answers
  1. erwin
    erwin avatar
    398 posts
    Member since:
    Dec 2006

    Posted 22 Aug 2018 Link to this post

    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. Georgi
    Admin
    Georgi avatar
    580 posts

    Posted 24 Aug 2018 Link to this post

    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.
  3. erwin
    erwin avatar
    398 posts
    Member since:
    Dec 2006

    Posted 24 Aug 2018 in reply to Georgi Link to this post

    Thanks Gerogi,

    exactly what I needed.

    Kind regards

    Erwin

Back to Top