Results 1 to 10 of 14

Thread: Tab styling variance from 4.1.1 to 4.2

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    78
    Vote Rating
    9
      0  

    Question 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
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      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;
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    78
    Vote Rating
    9
      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
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      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?
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    78
    Vote Rating
    9
      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
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      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?
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

Tags for this Thread

Posting Permissions

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