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!
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
0
Sergio
Top achievements
Rank 1
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.
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
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
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!