Hybrid View

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9405 in a recent build.
  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    25
    Vote Rating
    2
    dcohn is on a distinguished road

      0  

    Default New theme CSS breaks other CSS on the page

    New theme CSS breaks other CSS on the page


    With 4.1.1 I was using ext-all-scoped.css along with the following to prevent the ExtJS CSS from messing with my non-ExtJS HTML/CSS on my page

    Code:
    Ext = {
    buildSettings:{
    baseCSSPrefix: 'x-',
    scopeResetCSS: true
    }
    };
    Now that I've upgraded to 4.2, scoped CSS is gone. I tried using the sandbox CSS but it's still breaking my other CSS, because it adds the class "x-border-box" to the HTML tag and the CSS for that class changes box-sizing to border-box.

    How can I get the ExtJS CSS to only apply to ExtJS components

  2. #2
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,294
    Vote Rating
    121
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    25
    Vote Rating
    2
    dcohn is on a distinguished road

      0  

    Default


    Any thoughts on a workaround?

  4. #4
    Sencha - Ext JS Dev Team Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    274
    Vote Rating
    76
    Phil Guerrant is just really nice Phil Guerrant is just really nice Phil Guerrant is just really nice Phil Guerrant is just really nice

      0  

    Default


    In Ext 4.2 most of the the global CSS reset rules were removed, and so scoped CSS was removed since the hope was that it would no longer be needed. In Ext 4.2 we are only setting the following styles on the document body:

    - box-sizing: border-box;
    - font-family
    - font-size
    - color
    - background-color (neptune only)
    - margin: 0;

    Our thought to fix the issue you are having with the box model is to remove the "x-border-box" class from the html element and instead add it to the element of top-level Ext JS components. This would ensure that the entire document does not use border-box, only Ext JS components and their descendants.

    The other styles that the Ext JS stylesheet sets on the document body should be easily overridable.

    I will see if I can come up with an override that will fix the issue you are having with the box model in 4.2.0.

    Thoughts?
    Phil Guerrant
    Ext JS - Development Team

  5. #5
    Sencha - Ext JS Dev Team Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    274
    Vote Rating
    76
    Phil Guerrant is just really nice Phil Guerrant is just really nice Phil Guerrant is just really nice Phil Guerrant is just really nice

      0  

    Default


    I've added a fix in Ext JS 4.2.1 that adds the x-border-box class to top level components instead of the html tag. Here's an override that you can use in 4.2.0:

    Code:
    Ext.define('Ext.BorderBoxFix', {
        override: 'Ext.AbstractComponent',
    
    
        initStyles: function(targetEl) {
            this.callParent(arguments);
    
    
            if (Ext.isBorderBox && !this.ownerCt) {
                targetEl.addCls(Ext.baseCSSPrefix + 'border-box');
            }
        }
    });
    
    
    Ext.onReady(function() {
        Ext.fly(document.documentElement).removeCls(Ext.baseCSSPrefix + 'border-box');
    });
    Phil Guerrant
    Ext JS - Development Team

  6. #6
    Sencha User
    Join Date
    Sep 2011
    Posts
    25
    Vote Rating
    2
    dcohn is on a distinguished road

      0  

    Default


    Quote Originally Posted by Phil Guerrant View Post
    I've added a fix in Ext JS 4.2.1 that adds the x-border-box class to top level components instead of the html tag. Here's an override that you can use in 4.2.0:

    Code:
    Ext.define('Ext.BorderBoxFix', {
        override: 'Ext.AbstractComponent',
    
    
        initStyles: function(targetEl) {
            this.callParent(arguments);
    
    
            if (Ext.isBorderBox && !this.ownerCt) {
                targetEl.addCls(Ext.baseCSSPrefix + 'border-box');
            }
        }
    });
    
    
    Ext.onReady(function() {
        Ext.fly(document.documentElement).removeCls(Ext.baseCSSPrefix + 'border-box');
    });
    This worked, thanks. You can close.