Problem styling the tabstrip

3 posts, 0 answers
  1. Sergio
    Sergio avatar
    12 posts
    Member since:
    Apr 2014

    Posted 27 May 2014 Link to this post


    I'm having some trouble with styling the tabstrip. First, I have a simple tabstrip, with 2 buttons. The code is like this:

            <div data-role="footer" id="footer">
                <div data-role="tabstrip" id="badges-tabs">
                    <a href="#destaques" data-icon="favorites" data-badge="0">Destaques</a>
                    <a href="#ofertas" data-role="button" data-icon="cart" data-badge="0">Ofertas</a>

    Without any custom CSS, my tabstrip looks like this (please note I'm using flatUI as layout):


    How can I make the tabstrip display the 2 buttons with equal width, and make them fit the tabstrip container ?

    I have to manually set dimensions but this is not good for a responsive design.

    So I set a background color for the tabstrip, and a background color for the active state property. Also, I set the color to white. My tabstrip looks like this:


    You can see the active state button is a bit outside the tabstrip, and they are aligned on the center, together.

    If I change my smartphone to landscape mode, this is what happens:


    I have another problem with CSS on the back button. I copied the back button code from one of the examples on the website:

    <a data-role="backbutton" data-align="left" data-icon="back">Voltar</a>

    But its not showing the back arrow along with the text. How can I display the back arrow on the back button?

    Thanks for the help!
  2. Sergio
    Sergio avatar
    12 posts
    Member since:
    Apr 2014

    Posted 27 May 2014 Link to this post

    Oh, one more thing. How can I add a loading icon to the loading message that pops on the screen?

    Mine is a dark gray square with the text "Loading..." at the bottom. There is a blank space on the top, but nothing is shown.
  3. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 28 May 2014 Link to this post

    Hello Sergio,

    Looks like you're missing the whole styling of the Flat skin - it shouldn't look like this. Can you send a more complete sample using the Kendo UI Dojo, so that we can see what happens and help you fix it?

    On a side note, there is no back button arrow in the Flat skin.

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