Hybrid View

  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?

Thread Participants: 3

Tags for this Thread