This is a migrated thread and some comments may be shown as answers.

Problem styling the tabstrip

2 Answers 129 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Sergio
Top achievements
Rank 1
Sergio asked on 28 May 2014, 03:09 AM
Hi,

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>
            </div> 
        </div>

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

<tabstrip1.jpg>

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:

<tabstrip2.jpg>

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:

<tabstrip3.jpg>


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 Answers, 1 is accepted

Sort by
0
Sergio
Top achievements
Rank 1
answered on 28 May 2014, 03:16 AM
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.
0
Kamen Bundev
Telerik team
answered on 28 May 2014, 06:52 AM
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.

Regards,
Kamen Bundev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TabStrip (Mobile)
Asked by
Sergio
Top achievements
Rank 1
Answers by
Sergio
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or