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

3 posts, 1 answers
  1. Logan
    Logan avatar
    32 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
    8330 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. UI for ASP.NET MVC is VS 2017 Ready
  4. Logan
    Logan avatar
    32 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