PDA

View Full Version : [4.2.1] x-body applied to body-tag overriding styles



winkelmann
8 Aug 2013, 10:55 PM
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

winkelmann
8 Aug 2013, 10:57 PM
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

Gary Schlosberg
9 Aug 2013, 6:55 AM
As far as the issue in the thread you referenced (http://www.sencha.com/forum/showthread.php?214736), it looks like there was a related bug fix. Perhaps this workaround will help:


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!

winkelmann
11 Aug 2013, 10:31 PM
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:


<!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:

<!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

Gary Schlosberg
12 Oct 2013, 4:51 AM
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.