PDA

View Full Version : Tab header width change



jalpa.pujara
27 Feb 2012, 2:10 AM
Is there any way to set different widths of tabs in tab panel based on the tab header text width?
e.g. if tabpanel has 3 tabs.

Tab number 1
Tab number 2 xxxxxxxxxx
Tab number 3 xxxxxxxxxxxxxxxxxxxx

How to set following widths of the tabs.

Tab number 1 - 150px
Tab number 2 xxxxxxxxxx - 180px
Tab number 3 xxxxxxxxxxxxxxxxxxxx - 200px

Ersmarker
27 Feb 2012, 7:01 AM
The TabItem text can be HTML, so you can create a span element with a custom width.



TabItem t1 = new TabItem();
t1.setText("<span style=\"width:150px\">&nbsp</span>");
TabItem t2 = new TabItem();
t2.setText("<span style=\"width:180px\">xxxxxxxxxx</span>");
TabItem t3 = new TabItem();
t3.setText("<span style=\"width:200px\">xxxxxxxxxxxxxxxxxxxx</span>");

jalpa.pujara
27 Feb 2012, 7:36 AM
I have already tried it. It does not work.
When I checked in firebug I get following code. I am putting my tab text(In red) in span element with increased width. I think it does not reflect because outer span element width is still 125px.

<A class=x-tab-strip-close role=presentation></A>
<A class=x-tab-right role=presentation>
<EM class=x-tab-left role=presentation>
<SPAN style="WIDTH: 125px" class=x-tab-strip-inner role=presentation>
<SPAN class="x-tab-strip-text ">
<SPAN style="WIDTH: 170px">Compensation Cycle</SPAN></SPAN></SPAN></EM></A>
<IMG style="WIDTH: 16px; BACKGROUND: url(../images/app/icons/CompCycle.png) no-repeat 0px 0px; HEIGHT: 16px" class=x-tab-image border=0 src="http://127.0.0.1:8888/app/clear.cache.gif" onload='this.__gwtLastUnhandledEvent="load";' __gwtLastUnhandledEvent="load">

Ersmarker
28 Feb 2012, 6:05 AM
Check if you have set
panel.setResizeTabs(true);

If you have, try setting it to false.

jalpa.pujara
28 Feb 2012, 7:37 AM
Yeah..that was the culprit. Thanks a lot.