Results 1 to 4 of 4

Thread: How to make tabs equal width

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2014
    Posts
    37
    Answers
    3
    Vote Rating
    1
      0  

    Default Answered: How to make tabs equal width

    Seems like something that should be easy to do but I can't figure it out. This works:

    Code:
    .x-tab {
      width:120px;
    }
    but I don't want to change it globally, just for certain views and the width might need to vary by view. I've tried assigning my own class to the tabs, for example cls:'my-tab-class' and then in the CSS:

    Code:
    .my-tab-class .x-tab {
       width:120px;
    }
    but that doesn't work either, in fact I don't even see 'my-tab-class' when I inspect the html. Probably something I don't understand about the way the Tab components are constructed. If anybody has any ideas I would appreciate it. Thanks.

  2. Here's one way:
    Code:
                tabBar: {
                    defaults: {
                        width: '120px'
                    }
                },
    https://fiddle.sencha.com/#fiddle/18dd

  3. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    9,780
    Answers
    404
    Vote Rating
    258
      0  

    Default

    Here's one way:
    Code:
                tabBar: {
                    defaults: {
                        width: '120px'
                    }
                },
    https://fiddle.sencha.com/#fiddle/18dd


    Join me at SenchaCon 2016!

  4. #3
    Sencha Premium Member
    Join Date
    Jun 2014
    Posts
    37
    Answers
    3
    Vote Rating
    1
      0  

    Default

    Thanks. That works fine. I had looked at the Ext.tab.Bar component in the docs but the warnings about it being a private class scared me off.

  5. #4
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    9,780
    Answers
    404
    Vote Rating
    258
      0  

    Default

    It's definitely best to avoid private classes. In this case, though, you aren't utilizing it directly, rather through the tabBar config, which itself is not private.


    Join me at SenchaCon 2016!

Similar Threads

  1. Cannot resize tab width nor make the tabs resizable
    By gui0506 in forum Sencha GXT 3.1
    Replies: 0
    Last Post: 2 Feb 2015, 1:38 PM
  2. Replies: 4
    Last Post: 27 Sep 2013, 12:59 PM
  3. Replies: 2
    Last Post: 26 Dec 2011, 4:56 PM
  4. Replies: 4
    Last Post: 23 Oct 2010, 2:37 AM
  5. Tabs' width in a layout is not changed when the region width changes
    By maya in forum Ext 1.x: Help & Discussion
    Replies: 8
    Last Post: 3 Jun 2008, 12:47 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •