PDA

View Full Version : [NOREPRO] CSS interference



codeworx
17 Feb 2011, 1:20 AM
First of all I want to tell you that I’m a really big fan of extjs and ext4 looks very impressive!! Good job!

We have a problem with the ext builtin css styles. It was a problem in ext3 but it is seams that in ext4 it becomes even bigger.

Normally we work with the html5 doctype ‘<!DOCTYPE HTML>’ that forces every common browser (ff, safari, ie4-9, …) to use the same boxmodel. Ext4 seams to automatically apped a calss to the body that changes the box model for the whole page (box-sizing: border-box;). We use ext within our ContentManagementSystem which has to run parallel to the custom templates of our customers. The CMS is ext-window-based and runs directly on the customers content pages and does not have a separate backend. That is why we have to implement the ext CSS parallel to our customers CSS and that is why the global Style-Definitions in ext are interfering with our custom CSS styles. It is very “unsexy” to specifically overwrite every ext-CSS-Definition.

If we specifically overwrite all ext css the way we need it, for example within our content-area (like “#content strong { ... }”), it is no longer possible to have ext components (like buttons) in the same container as our content because that would “break” the ext components layout.

It isn’t just the box model, it is the other CSS definitions as well … for example all browsers render b-Tags and strong-Tags bold, that’s as it is and no one has to define those tags in his CSS because it is not necessary. Since ext makes all those tags to look like normal unstyled text everyone using ext has to specifically define those standard tags aswell.

Why don’t you just leave all global CSS as it is, add a class to all ext components like “x-component” and then make CSS definitions affecting only those classes?

That means your styles would change from this:
.ext-forced-border-box,
.ext-forced-border-box * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
... to something like this:
.ext-forced-border-box .x-component,
.ext-forced-border-box .x-component * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

This would solve all interfearence problems in most environments.

Phil.Strong
17 Feb 2011, 8:33 AM
Seems like your talking about the reset that extjs performs. This is pretty standard and in fact super important for Sencha to be able to deliver cross browser compatibility.

brian.moeskau
17 Feb 2011, 8:50 AM
Reset in general has been in Ext since the beginning and is not going to change. It's required for consistent x-browser layouts.

Regarding the border-box rules, those definitely need to be scoped to the Ext components only, even for our new sandboxing to work correctly. Having those scoped to * was simply an oversight and will be fixed before 4.0 ships.

TommyMaintz
17 Feb 2011, 11:18 AM
We will set up scoping for the resetting css to just apply to Ext components before the final release. It just hasn't made it in in time for the preview release.

codeworx
17 Feb 2011, 1:20 PM
Thank you for your comments and for moving my issue to the bugs section ... obviously it is on the right place here.
It would be great if this "reset" would be affecting the ext components only … I’m looking forward to the final release of ext version 4!

If you are changing the css in that manner it would be great if you could restrict not only the box-model to the ext-components but also the other "reset"-styles that were affecting the whole page in ext3 on line 7 in ext-all.css:
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}img,body,html{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}

… I mean, why should anyone want his "strong"-tags do render with "font-weight:normal;" or the headings (1-x) to render with "font-size:100%;" that should be restricted to the ext-components and not to the "global styles".

TommyMaintz
17 Feb 2011, 1:30 PM
When I said scoping the resetting CSS I meant both the .box styles and the html, body etc etc. So yes, they will be scoped as well :)

sebsei
6 Apr 2011, 6:37 AM
Hi Tommy

Has this really been fixed in Beta1?

I'm seeing the following lines in ext-all-debug.css:



/* line 131, ../themes/stylesheets/ext4/default/core/_reset.scss */
.x-border-box .x-reset,
.x-border-box .x-reset * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

edykstra
9 Aug 2011, 11:33 AM
Hello,

I am still seeing issues with this in 4.0.2a. Am I mistaken (and the root cause of my issue is something else) or am I correct? Will it be fixed in the next public release and when is that?

Thanks,

Eric

theNailz
10 Aug 2011, 5:07 AM
This is still a bug in 4.0.2a; The border-box model should be applied to the components only (as stated above), but it is applied to *everything*.

edykstra
10 Aug 2011, 5:26 AM
Hey - thanks for the confirmation. Any idea what the best work-around is?

theNailz
10 Aug 2011, 5:50 AM
I haven't found a clean workaround yet, I'm waiting for a reply from the dev-team of Sencha to confirm this is still on their to-do list. (If not, we need to step back to version 3 or do some other magic.)
In the meantime, I'm including a temporary css file with border-box adjustments for our own layout.

edykstra
10 Aug 2011, 6:56 AM
Re: "I'm including a temporary css file with border-box adjustments for our own layout."

I am mis-understanding something (my CSS skills are not strong). How do you make the border-box adjustments in your own layout such that they are not impacted by the ExtJS reset?

codeworx
12 Aug 2011, 12:46 AM
set the Ext.scopeResetCSS property to true (see http://docs.sencha.com/ext-js/4-0/#/api/Ext-property-scopeResetCSS) that will solve this problem

edykstra
12 Aug 2011, 6:21 AM
I must be doing something wrong. It creates FAR more CSS issues than it solves.

If I use this in my CSS, my site is perfect, but the ExtJS is messed up.

]
.x-border-box .x-reset * {
box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-webkit-box-sizing: content-box;
}


If I use this in my CSS, my site is messed up, but the ExtJS is perfect.


.x-border-box .x-reset * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}


When I specify content-box in my CSS, source resources/css/ext-all-scoped.css instead of resources/css/ext-all-gray.css, and add a Ext.scopeResetCSS = true, I get a combination of the above.

Are you aware of any examples I can view?

codeworx
14 Aug 2011, 11:58 PM
This "Ext.scopeResetCSS=true"-solution wraps a container around every ext-component and the x-reset is only restricted to all content beneath those x-reset-containers.
if you have content on your page (outside ext components) and all ext components are separated (e.g. within windows or panels) you won't have a problem.
if you have ext components and other content nested inside each other, I believe there is no quick fix for you.