Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    65
    Vote Rating
    3
    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,501
    Vote Rating
    47
    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
    65
    Vote Rating
    3
    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,501
    Vote Rating
    47
    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
    65
    Vote Rating
    3
    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,501
    Vote Rating
    47
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi