Long label in Mobile Form overlaps input

2 posts, 0 answers
  1. JohnVS
    JohnVS avatar
    89 posts
    Member since:
    Apr 2013

    Posted 22 Aug 2013 Link to this post

    I just noticed that when using the Kendo Mobile Forms, if the label of the form element is too long and takes up more than 50% of the row, it overlaps the input box. I had this happen on our project and didn't know if it was just us, so I manually changed a label on Kendo's demo page for Form, but it does the same thing (see screenshot). Is this broken, or are we expected to come up with some custom CSS to have the labels not overlap the inputs?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 26 Aug 2013 Link to this post

    Hello John,

    In order to prevent the input box overlapping you could apply the following CSS rule to the labels:

    .km-listview.km-list label {
       display: inline-block;
       width: 50%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
    }

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top