View Full Version : My tabs are so small!

11 Oct 2006, 7:50 AM
Check these bad boys out:

http://img242.imageshack.us/img242/7001/tabsmallqn9.th.jpg (http://img242.imageshack.us/my.php?image=tabsmallqn9.jpg)

So i switched from a table design to completely CSS, im not done yet, notice my search is in the top rightfor whatever reason. I am finishing it now but damn there is something wrong with those tabs.

11 Oct 2006, 8:05 AM
The font for the tabs is set in the CSS using a percentage of the body size. I hate that as well and usually override it. Here's a post I just made about customizing the tab CSS.


11 Oct 2006, 11:52 AM
thanks, i found out where you do the calculation and used the caveman approach.... erased your code and wrote 10px :lol:

11 Oct 2006, 12:28 PM
That CSS all came from the YUI design pattern lib. In my version I have it as 9px. :D

11 Dec 2007, 7:19 AM
I wonder if it would be possible to post the solution as the link is not working anymore.

Thanks in advance.

11 Dec 2007, 9:33 AM
That thread is a year old and any solution posted would not be relevant to the current code base. What are you trying to accomplish?

12 Dec 2007, 1:04 AM
I just want to customize the tabs font size for one tab panel. I am using more than one tab panels in my application so editing the stylesheet is not an option. Any suggestions?

Thanks in advance.

12 Dec 2007, 4:58 AM
For those who have the same issue, here is a very quick and dirty solution (more a workaround than a solution). For each tab of your tabpanel add this line after the tabpanel is rendered:

$(idOfTabPanel+'__'+idOfPanel).down('span.x-tab-strip-text').setStyle({fontSize: '12pt'});

12 Dec 2007, 6:53 AM

12 Dec 2007, 8:17 AM
You can certainly do it in CSS - you need to understand how to properly override styles specific to a single element.

12 Dec 2007, 1:23 PM
Thanks again for making me learn a new part of css. Now I got it by the way you suggested.