[CLOSED] How to override CSS when ExtJS renders different styles / elements for different browsers

  1. #1

    [CLOSED] How to override CSS when ExtJS renders different styles / elements for different browsers

    I want to change the background of the active tab. I created a style that works great in IE9. However, the same style breaks the IE8 tabs and in Chrome, it doesn't do anything. So as a general rule, what's the best way to override styles? In IE8, ExtJS renders tables for tabs but in IE9 and Chrome, it uses divs and HTML5 styles to achieve round corners.

    .x-tab-active .x-tab-inner {    
        font-weight: bold !important;
    }
    
    
    .x-nlg .x-tab-active {
        background-image: url('../Images/Common/activetab.png') !important;
        box-shadow:none !important;
        border-top-color: $border-color-hl;
    }
    Last edited by Baidaly; Apr 03, 2013 at 4:55 AM. Reason: [CLOSED]
  2. #2
    Hello!

    It's much better to render controls using HTML 5 and new CSS features. Unfortunately, there are many people who use old versions of IE which do not know anything about HTML 5 and have many bugs. For old browser Ext JS uses old tools like tables.

    General rule is to use CSS. Ext JS adds to the body tag special classes which help to add CSS for certain browser. In case of IE9 and IE8 you can use "x-ie9" and ""x-ie8" classes. But you should understand that body tag in IE9 will have tags of all previous version of IE : " x-body x-ie x-ie7p x-ie8p x-ie9p x-ie9 x-ie9m x-nlg". For example:

    <style>
    	.x-ie8 .x-tab-inner {
    		color: #008000 !important;
    	}
    
    	.x-ie9 .x-tab-inner {
    		color: #ffff00 !important;
    	}
    </style>
  3. #3
    thanks! this helps. do you know what x-nlg stands for?
  4. #4
    Quote Originally Posted by jchau View Post
    thanks! this helps. do you know what x-nlg stands for?
    According to this thread: http://www.sencha.com/forum/showthread.php?127665

    x-nbr - browser doesn't support CSS3 Border Radius
    x-nlg - browser doesn't support CSS3 LInear Gradient

    It helps to support legacy browsers

Similar Threads

  1. Replies: 2
    Last Post: Mar 27, 2012, 11:57 AM
  2. [CLOSED] Override styles
    By FVNoel in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 15, 2012, 3:19 PM
  3. Replies: 9
    Last Post: Mar 24, 2010, 1:01 PM
  4. [CLOSED] Combobox renders value as text
    By jchau in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 24, 2009, 4:41 PM
  5. Replies: 0
    Last Post: Aug 28, 2008, 5:09 PM

Posting Permissions