I am in the process of updating an existing application from Ext 3.x to 4, and I've managed to enable Ext's scoped reset CSS option to prevent Ext from applying its CSS reset to my entire application, however I'm now encountering another issue. My application uses alot of hardcoded, non-ext generated HTML and CSS styles, much of which is contained within Ext component's (panels, tabpanels, ect.) Obviously, since this html is a descendent of the ext component's containing elements, it inherits the CSS reset styling. And as a result, totally jack up the custom styling of the non-Ext html.
Specifically there are two CSS rules which are causing the issues:
.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;}[/php]
This property was not much of an issue, all I had to do was create my own reset wrapper class that changed the box-sizing back to 'content-box' and apply that class to the topmost wrapper element in my custom html. That rule is as follows:
.my-reset, .my-reset *, .x-reset .my-reset *, .x-border-box .x-reset .my-reset * { box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box;}
However the other CSS rule is what is not so simple to negate:
.x-reset html, .x-reset body, .x-reset div, .x-reset dl, .x-reset dt, .x-reset dd, .x-reset ul, .x-reset ol, .x-reset li, .x-reset h1, .x-reset h2, .x-reset h3, .x-reset h4, .x-reset h5, .x-reset h6, .x-reset pre, .x-reset code, .x-reset form, .x-reset fieldset, .x-reset legend, .x-reset input, .x-reset textarea, .x-reset p, .x-reset blockquote, .x-reset th, .x-reset td {margin: 0;padding: 0;}
The reason this rule is so troublesome is that all the different elements in my custom HTML are not going to have the same margin and padding, so I can't just override these styles in the same way I did for the box-sizing. And the reason that this rule takes precedence over the vast majority of my custom CSS style's is because it has a higher specificity than a CSS class by itself. I.e. the ".x-reset div" selector's margin/padding styles overrides that of a rule like ".my-cool-class { padding: 5px; margin:5px; } " for ''.
To overcome this, naturally I could update my custom css to give the rules higher specificity by either prefixing class selectors with the type of element it is targeting ("div.my-cool-class") or by prefixing the rules with .x-reset (".x-reset .my-cool-class"), however either of these options would require alot of manual updating of a great deal of custom css that already exists, not to mention adding to filesize, and limiting the modularity of the CSS classes.
So is there any way via Ext's settings, or maybe via some other CSS solution that I am just merely overlooking that could solve this problem elegantly and hopefully with not too much overhead?
You could remove the specificity from the extjs css, that way your css if included afterwards would "win".
So convert:
.x-reset html, .x-reset body, .x-reset div,
.x-reset dl, .x-reset dt, .x-reset dd,
.x-reset ul, .x-reset ol, .x-reset li,
.x-reset h1, .x-reset h2, .x-reset h3,
.x-reset h4, .x-reset h5, .x-reset h6,
.x-reset pre, .x-reset code, .x-reset form,
.x-reset fieldset, .x-reset legend, .x-reset input,
.x-reset textarea, .x-reset p, .x-reset blockquote,
.x-reset th, .x-reset td {
margin: 0;
padding: 0;
}
to:
html, body, div,
dl, dt, dd,
ul, ol, li,
h1, h2, h3,
h4, h5, h6,
pre, code, form,
fieldset, legend, input,
textarea, p, blockquote,
th, td {
margin: 0;
padding: 0;
}
then your css will apply
.myPadding{
padding: 10px
}