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

Icons for components are too high (kendo+bootstap 3)

2 Answers 17 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Logan
Top achievements
Rank 1
Veteran
Logan asked on 22 Apr 2014, 12:20 PM
All of the icons that are placed on the kendo controls are a bit too high (see attached images).  I believe this started when I installed bootstrap, but I am not sure of the best fix.

Thanks

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 22 Apr 2014, 03:09 PM
Hello Logan,

The problem is caused by a little obscure difference in HTML/CSS web standards. I suspect that you are using an XHTML 1.0 Transitional DOCTYPE. In this case inline-block elements ignore the vertical-align property if they have no sibling text nodes. The issue is not exhibited with other DOCTYPEs. You have two options:

+ change the DOCTYPE to XHTML 1.0 Strict, XHTML 1.1 or HTML 5
+ use the following CSS rule to add a phantom text node:

.k-select:after {
    content: "\a0";
    display: inline-block;
    width: 0;
}

Since there have been a couple of reports for this phenomenon, we will include the fix in future versions of Kendo UI.

https://github.com/telerik/kendo-ui-core/issues/22

Regards,
Dimo
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Logan
Top achievements
Rank 1
Veteran
answered on 22 Apr 2014, 06:31 PM
That fixed my problem. 
Thanks,
Logan
Tags
General Discussions
Asked by
Logan
Top achievements
Rank 1
Veteran
Answers by
Dimo
Telerik team
Logan
Top achievements
Rank 1
Veteran
Share this question
or