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

3 posts, 1 answers
  1. Logan
    Logan avatar
    33 posts
    Member since:
    Apr 2013

    Posted 22 Apr 2014 Link to this post

    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. Answer
    Dimo
    Admin
    Dimo avatar
    8353 posts

    Posted 22 Apr 2014 Link to this post

    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.

     
  3. Logan
    Logan avatar
    33 posts
    Member since:
    Apr 2013

    Posted 22 Apr 2014 in reply to Dimo Link to this post

    That fixed my problem. 
    Thanks,
    Logan
Back to Top