1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    United Kingdom
    Posts
    7
    Vote Rating
    0
    jalpa.pujara is on a distinguished road

      0  

    Question Answered: Tab header width change

    Answered: Tab header width change


    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

  2. Check if you have set
    panel.setResizeTabs(true);

    If you have, try setting it to false.

  3. #2
    Sencha - GXT Dev Team
    Join Date
    Nov 2010
    Posts
    209
    Answers
    4
    Vote Rating
    -2
    Ersmarker has a little shameless behaviour in the past

      0  

    Default


    The TabItem text can be HTML, so you can create a span element with a custom width.

    Code:
            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>");

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    United Kingdom
    Posts
    7
    Vote Rating
    0
    jalpa.pujara is on a distinguished road

      0  

    Default


    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">

  5. #4
    Sencha - GXT Dev Team
    Join Date
    Nov 2010
    Posts
    209
    Answers
    4
    Vote Rating
    -2
    Ersmarker has a little shameless behaviour in the past

      0  

    Default


    Check if you have set
    panel.setResizeTabs(true);

    If you have, try setting it to false.

  6. #5
    Sencha User
    Join Date
    Nov 2011
    Location
    United Kingdom
    Posts
    7
    Vote Rating
    0
    jalpa.pujara is on a distinguished road

      0  

    Default


    Yeah..that was the culprit. Thanks a lot.

Thread Participants: 1

Tags for this Thread