Results 1 to 5 of 5

Thread: [4.2.1] x-body applied to body-tag overriding styles

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2010
    Location
    Hamburg, Germany
    Posts
    196
    Vote Rating
    7
      0  

    Default [4.2.1] x-body applied to body-tag overriding styles

    REQUIRED INFORMATION


    Ext version tested:

    • Ext 4.2.1



    Description:

    • Whenever loading ExtJS on an existing page, x-body is applied to the document body. x-body seems to specify a color, font-family and font-size which breaks existing pages.



    Steps to reproduce the problem:

    • Include ExtJS on a page with existing markup.



    The result that was expected:

    • My original styles (CSS) should stay applied.



    The result that occurs instead:

    • x-body overwrites font-size, font-family and color


    Debugging already done:

    • Checked the sass-sources for the x-body specification
    • Tested, if ExtJS really needs what is specified in x-body



    Possible fix:

    • Remove the x-body specification in ext-theme-neutral/sass/src/Component.scss



    Additional CSS used:

    • ExtJS default styles
    • custom CSS that sets color, font-family and font-size

  2. #2
    Ext JS Premium Member
    Join Date
    Dec 2010
    Location
    Hamburg, Germany
    Posts
    196
    Vote Rating
    7
      0  

    Default

    This should be simple enough to reproduce. I can however try to build a test case if one is required.
    There is also a help thread about this topic that can be found here
    http://www.sencha.com/forum/showthread.php?214736

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Vote Rating
    296
      0  

    Default

    As far as the issue in the thread you referenced, it looks like there was a related bug fix. Perhaps this workaround will help:
    Code:
    Ext.getBody().removeCls([
        'x-body'
        //other classes as necessary
    ]);
    If you still need to file this bug, please include a small test case that reproduces the problem. Thanks!

  4. #4
    Ext JS Premium Member
    Join Date
    Dec 2010
    Location
    Hamburg, Germany
    Posts
    196
    Vote Rating
    7
      0  

    Default

    I do still want to report this as a bug, since I think that ExtJS should not be messing with the default browser styles on body level at all.

    Code Example 1, causing the default font to be set to Tahoma and forcing the font size to 12px:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="../resources/ext-theme-gray/ext-theme-gray-all.css" />
        <script type="text/javascript" src="../ext-all-debug.js"></script>
    </head>
        <body>
            <p>Hello World</p>
        </body>
    </html>
    Code Example 2, causing the default color being set to white, background color to black and forcing the font size to 15px:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" href="../resources/ext-theme-access/ext-theme-access-all.css" />
        <script type="text/javascript" src="../ext-all-debug.js"></script>
    </head>
        <body>
            <p>Hello World</p>
        </body>
    </html>
    What I find annoying, is that ExtJS doesn't actually need this for component styling anywhere.
    I am aware that I could override everything in my custom CSS, but if I have existing CSS and i include ExtJS it should not change my existing styles unless it absolutely has to.

    Cheers,
    Jan

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Vote Rating
    296
      0  

    Default

    I believe this was fixed in 4.2.2 by EXTJSIV-9963. Apparently all styles have been removed from body except for $body-background-color. One can set this to 'none' or 'transparent', and the style won't be generated.

Posting Permissions

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