Toolbar SplitButton no scrolling?

4 posts, 0 answers
  1. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 22 Mar 2018 Link to this post

    Hello,

    I have a toolbar with a Split Button and many entries which are not all visible because the height of the screen is not big enough...
    How to have a scrolling of the splitbutton dropdown list if the screen is to small i.e. there a more items to display depeneding on the screen size (I don't want to have a fix height)

    see attached picture

  2. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 26 Mar 2018 Link to this post

    Hello Robert,

    You can set a custom height to split button popup by applying the following CSS:
    .k-split-wrapper {
        height: 300px !important;
    }
    .k-split-container {
        height: 100%;
        overflow: auto;
    }


    Regards,
    Magdalena
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Robert Madrian
    Robert Madrian avatar
    223 posts
    Member since:
    Apr 2003

    Posted 26 Mar 2018 in reply to Magdalena Link to this post

    Hello,

    but with that fix height it Looks bad if there are fewer items then the height - isn't there a better (Javascript) solution to have
    only Scrolling if necessary? (see attached Picture)

  4. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 27 Mar 2018 Link to this post

    Hi Robert,

    The easiest way is to use max-height instead.
    .k-split-wrapper {
        max-height: 300px !important;
    }
    .k-split-container {
        max-height: 100%;
        overflow: auto;
    }

    If you would like to set the height dynamically, you can achieve it by a custom JavaScript calculation in the toolbar open event. If the .k-split-container element has set the max-height:100% by CSS, suffice it to set the dynamic height only to the .k-split-wrapper element.

    Regards,
    Magdalena
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top