smaller kendo dropdownlist control height

3 posts, 0 answers
  1. Troy
    Troy avatar
    5 posts
    Member since:
    Oct 2015

    Posted 13 Jan Link to this post

    I would like to reduce the height of the DDL control to match the reduced height of adjacent text input fields.

    See attached picture for current behavior.

    Before I start messing with CSS hacks I'd like to see if there's a cleaner way.

  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    91 posts

    Posted 13 Jan Link to this post

    Hello Troy,

    When it comes to working with the Kendo UI DropDownList, the only similar value that can be changed using the API would be the height of the DropDownList item list using the height property. If you want to change the height of the control's exterior, CSS is the way to go.

    I have prepared a sample for you in the KEndo UI Dojo that shows two DropDownLists resized to a smaller size that might fit your requirements better; you can take a look at it here

    The relevant style:

    .k-dropdown .k-dropdown-wrap{
       height: 24px;
    }

    I hope this helps!

    Regards,
    Eduardo Serra
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Troy
    Troy avatar
    5 posts
    Member since:
    Oct 2015

    Posted 13 Jan in reply to Eduardo Serra Link to this post

    Thanks, I needed a couple more CSS tweaks to get it looking right (see bad, good attachments):

    .k-dropdown .k-dropdown-wrap {
       height: 26px;
    }
    .k-dropdown-wrap .k-input {
        line-height: 22px;
    }
    .k-dropdown-wrap .k-icon {
        position: relative;
        top: -4px;
    }

Back to Top