Tabstrip height increase when insert font Icon & narrower buttons

2 posts, 0 answers
  1. Steven
    Steven avatar
    1 posts
    Member since:
    Feb 2015

    Posted 01 Mar 2015 Link to this post

    When ever I put a custom font icon in the tab strip it raises the height of the tab strip. The extra height (blank space above teh icon) is equivalent to the space reserved for the icon.  When I look at the code in dreamweaver I can see a grey square for where the Icons are meant to go and when the custom icon is inserted this grey box is place above the custom icon and the whole tab space is raised.  I tried all types of css  but is keeps on reserving this space for the kendo icon and will not give up the space when a custom font icon is inserted.

    <footer data-role="footer">
        <div data-role="tabstrip" style="background-color:#F96;font-size:small">
          <a onclick="noImg();" data-icon="favourites">None</a>
          <a onclick="medImg();" data-icon="compose" >Med</a>
          <a onclick="lgImg();" data-icon="globe">Large</a>
         <a href="views/insect.html" class="tabIcon"><i class="icon-kub-mobile" style="font-size:xx-large"></i><div>All hhh</div></a>

    Also when I have many buttons in the tabstrip each button has too much padding/margins and I would like them to be able to become even more narrower than default. How do I do this?
  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 03 Mar 2015 Link to this post

    Hi Steven,

    Please take a look at this help topic - it described how to create custom font icon in Kendo UI Mobile. Also in order to customize the appearance of any Kendo UI widget you should override the default styles using custom CSS rules.

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