1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    60
    Vote Rating
    1
    jkyoutsey is on a distinguished road

      0  

    Question Tab styling variance from 4.1.1 to 4.2

    Tab styling variance from 4.1.1 to 4.2


    I just switched from 4.1.1 to 4.2 and my tabs are wildly different than they were previously. The font is tolerable, but the lines below the tabs are not. What am I missing?
    4.1.1:
    41style.png
    4.2:
    42style.png

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Have you updated all your CSS (or rebuilt your CSS), and cleared the cache?

    Because I do not see any lines under my tabs.

    I don't think the font changed either. It's still

    Code:
    font-family: tahoma,arial,verdana,sans-serif;

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    60
    Vote Rating
    1
    jkyoutsey is on a distinguished road

      0  

    Default


    Animal, I don't really know what you mean by "rebuilt". CSS is just CSS. I completely replaced my 4.1 ExtJS with 4.2 in a completely different folder. So it should not be cached. The path is entirely different.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    CSS is built from SASS. You can theme your app using SASS and build that into a stylesheet.

    What browser do you see that effect on? What are the rules that create it?

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    60
    Vote Rating
    1
    jkyoutsey is on a distinguished road

      0  

    Default


    Okay, I guess we have done more heavy styling than I knew of. These are the CSS overrides in our stylesheet. I've got most of it fixed, but there is still a line under the active tab. I can't tell if this is some sort of z-ordering issue or if there is a style override that worked in 4.1 that now doesn't in 4.2, or some new style name we need to override.

    activetabline.png

    Code:
    .x-tab-bar {	background: #E7E7E7;
       background-image: none !important;
       height: 33px !important;
       border-width: 0px !important;
       border-bottom: 0px none!important;
    }
    
    
    .x-tab-default-top-active {
       background-image: none !important;
       background-color: white !important;
    }
    
    
    .x-tab-top {
       background-image: none !important;
       background: #E7E7E7 !important;
       border-color: #E7E7E7 !important;
    }
    
    
    .x-tab button .x-tab-inner {
       color: #333;
       float: left;
       font-weight: bold;
       font-size: 12px;
       cursor: pointer;
       outline: none;
       text-decoration: none;
       height: 24px;
    }
    
    
    .x-tab-default-top {
       -moz-box-shadow: none;
       -webkit-box-shadow: none;
       -o-box-shadow: none;
       box-shadow: none;
       border-width: 0px !important;
       border-color:  #ADADB0 !important;
    }
    
    
    .x-tab-bar-body {
       border-color: #ADADB0;
    }
    
    
    .x-tab-bar-strip-default {
       border-color: transparent;
       border-top-color: #ADADB0;
       top: 32px !important;
       background-color: transparent;
    }
    
    
    .x-tab-default-top button, .x-tab-default-top .x-tab-inner {
       height: 100%;
       line-height: 23px;
    }
    
    
    .x-tab-active {
       background-color: white !important;
       border-color: #ADADB0 !important;
       border-width:  1px !important;
       border-bottom-width: 0 !important;
    }
    
    
    .x-border-box .x-tab-bar-top .x-tab-bar-body {
       height: 33px;
    }
    
    
    .x-border-box .x-tab-default-top {
       height: 31px;
    }

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Is that your extra styling?

    Which bit of that is actually necessary?

    It breaks the tabs

    What is the effect you are after?

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    60
    Vote Rating
    1
    jkyoutsey is on a distinguished road

      0  

    Default


    My tabs are working just fine. Look at the 4.1.1 image in the first post in the thread. That's the styling I need. The rules I posted above are the ones that work just fine in 4.1.1. Only that bottom line on the active tab is incorrect.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Seems a lot of code for not much change. What is the effect on top of the standard theme that you want to achieve?

  9. #9
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    60
    Vote Rating
    1
    jkyoutsey is on a distinguished road

      0  

    Default


    As the image clearly shows, white tabs, grey background, taller tab, dark grey outline colors. It is wildly different from the default ExtJS theme.

    It's is an old 3.x style sheet that we stole from for 4.1.1. IT WORKS IN 4.1.1. So there is obviously something quite different about 4.2. If 411 and 42 were SO similar then I wouldn't have spent two days working on fixing things.

    How about this. Is there ONE or TWO styles that I can override to get white tabs with grey backgrounds and dark grey outlines?

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What about using the grey theme?

Thread Participants: 3

Tags for this Thread