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
    Location
    Kansas
    Posts
    1,403
    Vote Rating
    148
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      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
    323
    Vote Rating
    87
    Phil Guerrant is just really nice 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
    323
    Vote Rating
    87
    Phil Guerrant is just really nice 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.

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

      1  

    Default


    One minor improvement to the override. Replace this:
    Code:
    if (Ext.isBorderBox && !this.ownerCt) {
    with this:

    Code:
    if (Ext.isBorderBox && (!me.ownerCt || me.floating)) {
    To ensure that floating components are handled properly even if they are not at the top of the hierarchy
    Phil Guerrant
    Ext JS - Development Team

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    14
    Vote Rating
    0
    MagicMatt is on a distinguished road

      0  

    Default


    Hello,

    I came across this post from an internet search because we are experiencing a similar behavior that is undesired.

    Specifically, when we recently upgraded from ExtJS 3.4 to 4.2.1, several aspects of our custom CSS seem to be overwritten by Ext now. One of the most visual changes is that of the font size: most of our fonts are now much smaller than before the upgrade.

    I noticed in one of the above posts that the font-size is one property that ExtJS sets on the document body. It was stated that a fix was put in for 4.2.1, however we are still having the problem of Ext setting CSS to the document body instead of the top-level components.

    The fix given for 4.2.0 seems to only pertain to the border-box property, so I'm wondering if that was the only fix applied to 4.2.1?


    In any case, can you tell me what needs to happen to stop Ext from setting any property on the document level?

    Thanks!

  9. #9
    Sencha - Ext JS Dev Team Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    323
    Vote Rating
    87
    Phil Guerrant is just really nice 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


    Ext JS themes currently set 3 properties on the body: color, font-size, and font-family. Additionally, neptune and some other themes may set the background-color:

    You can override these globally using the following global SASS variables:

    $color
    $font-size
    $font-family
    $body-background-color
    Phil Guerrant
    Ext JS - Development Team

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Posts
    14
    Vote Rating
    0
    MagicMatt is on a distinguished road

      0  

    Default


    Thanks for the quick response!

    Unfortunately we work on computers without Admin rights, and it takes an act of congress to request specific software to be installed on our machines. As such, installing all that is necessary to compile the CSS using SASS is not an option at this point. Is there any other way to go about circumventing this issue?

    FWIW, currently our custom CSS sets 'font-size' to '100%' on the 'body' element.