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

Long label in Mobile Form overlaps input

1 Answer 179 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
JohnVS
Top achievements
Rank 1
JohnVS asked on 22 Aug 2013, 07:44 PM
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?

1 Answer, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 26 Aug 2013, 12:38 PM
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!
Tags
General Discussions
Asked by
JohnVS
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Share this question
or