Icons not vertically centred in buttons

4 posts, 0 answers
  1. Jay
    Jay avatar
    4 posts
    Member since:
    Oct 2015

    Posted 01 Mar 2016 Link to this post

    The problem is summarized in the attached.  Many of the buttons icons look this way, with the icon flush to the top of the parent container instead of vertically centred.

    I'm including the following CSS files and nothing else: (form the 2016 Q1 Release).  How can I fix this?

        <link rel="stylesheet" href="/CSS/Kendo/kendo.common.min.css" />
        <link rel="stylesheet" href="/CSS/Kendo/kendo.metro.min.css" />

  2. Patrick
    Admin
    Patrick avatar
    223 posts

    Posted 02 Mar 2016 Link to this post

    Hello Jay,

    After some investigating, I was able to reproduce your issue.  

    Please take a look at this Telerik Dojo reproducing the icons placement.  
    The reason why it is appearing that way is because <!DOCTYPE html> is missing.

    Here is an updated sample which shows the correct placement of the icons.

    Please let me know if this helps.  If it does not, please create a Dojo or update the 2nd example with the icon behavior.

    Regards,
    Patrick
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Jay
    Jay avatar
    4 posts
    Member since:
    Oct 2015

    Posted 08 Mar 2016 in reply to Patrick Link to this post

    Thank you Patrick for the reply.

    We were using an older DOCTYPE tag:

    - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    After changing to just 

    <!DOCTYPE html>

    The issue was resolved.

  4. Patrick
    Admin
    Patrick avatar
    223 posts

    Posted 09 Mar 2016 Link to this post

    Hi Jay,

    Glad everything worked out.  

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