CSS "nullifier" [Archive]

bone

18 Dec 2008, 3:27 AM

Hi there

I have this application, and in this application you can edit some HTML with the lovely Ext.form.HtmlEditor. Also, at some later point I want to view the HTML created from this in a div and place it somewhere on a page where Ext is included, both the javascript and the css.

My question is as follows; is it possible to add a class or something other fun to certain HTML elements to avoid them getting Ext CSS applied to them ?

like

<div class="ext-ignore">Ext css cant touch this <ul><li>hammer</li><li>time</li></ul></div>

Because in its current state the list will be somewhat, not a list. And thus the whole concept of a HtmlEditor fails if it wont look like what it did in the editor.

Thanks in advance, and sorry if this has already been answered

evant

18 Dec 2008, 3:39 AM

One method would be to inject it into a frame that doesn't have ext-all.css loaded.

Animal

18 Dec 2008, 3:59 AM

Or you could provide your own rules for elements within a ".ext-ignore" element which style ULs and LIs exactly as yuo wish in a cross-browser manner.

Condor

18 Dec 2008, 4:14 AM

Removing the global CSS rules is on the Ext 3.0 todo list.

bone

19 Dec 2008, 5:58 AM

One method would be to inject it into a frame that doesn't have ext-all.css loaded.

Iframe? No.

Or you could provide your own rules for elements within a ".ext-ignore" element which style ULs and LIs exactly as yuo wish in a cross-browser manner.

Yes, but you cant really compare remove/omit to override. Painting you yellow because you are yellow underneath the current red paint is not a good solution :D

Removing the global CSS rules is on the Ext 3.0 todo list.

Good answer. I also hope it makes its way from todo list to changelog.

I did what Animal suggested as I see it as the only viable option right now. Someone pasted me a link to some CSS styles I could use to override.

Condor

19 Dec 2008, 7:15 AM

Someone pasted me a link to some CSS styles I could use to override.

The default HTML4 stylesheet (http://www.w3.org/TR/CSS21/sample.html) should be a good startingpoint.

JoeK

28 Jan 2009, 5:49 AM

Bone, did you ever solve this problem? I'm trying to do the same thing and am finding it impossible to override the reset.css.

I've even gone so far as applying the style inline and that doesn't even work. I suspect I'm just making some kind of CSS blunder.

Trying to fix something as simple as this entered into the HtmlEditor:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

I wrapped these in a div tag:

<div class="resetOverride">...</div>

I've tried:

Define the CSS externally as:

.resetOverride ul {
list-style: disc;
}

.resetOverride ol {
list-style: decimal;
}

I've also tried using list-style-type, and using Firebug to change the style of the OL, UL, and LI elements directly. NOTHING puts the bullets back in. Though changing the font-weight style works fine, so I know I'm hitting the right elements.

Animal

28 Jan 2009, 6:10 AM

And what does Firebug say about the elements you are styling? Is that rule being applied? Are other rules taking precedence?

Animal

28 Jan 2009, 6:13 AM

Check what styling is applicable to what element:

http://www.w3.org/TR/2006/WD-CSS21-20061106/generate.html#propdef-list-style

karthik7777

23 Feb 2009, 3:38 PM

"resetOverride" is a good option. In my case, I wanted to overwrite globally for <body>,<h1>,etc tags.
So, I just added my styles for <body><h1>.. at the end of ext-all.css which in turn overwrites everything in ext-all.css.. This may not be ideal if you want to use some of those global css properties defined in ext-all.css

dj

24 Feb 2009, 8:13 AM

Bone, did you ever solve this problem? I'm trying to do the same thing and am finding it impossible to override the reset.css.

I've even gone so far as applying the style inline and that doesn't even work. I suspect I'm just making some kind of CSS blunder.

Trying to fix something as simple as this entered into the HtmlEditor:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

I wrapped these in a div tag:

<div class="resetOverride">...</div>

I've tried:

Define the CSS externally as:

.resetOverride ul {
list-style: disc;
}

.resetOverride ol {
list-style: decimal;
}

I've also tried using list-style-type, and using Firebug to change the style of the OL, UL, and LI elements directly. NOTHING puts the bullets back in. Though changing the font-weight style works fine, so I know I'm hitting the right elements.

Since this thread was resurrected I thought I could comment on this problem: reset.css also removed the margin and padding of the uls and ols - you have to re-add them otherwise your list bullets have no space to go.

E.g. this works for me:

.resetOverride ul {
list-style:disc;
list-style-position:outside;
padding-left:20px;
}

MikeB

7 Jul 2010, 5:12 PM

Has this issue ever been resolved? I seem to recall reading something recently about a method to ignore the Ext CSS in a panel, but can't find it and don't remember where I saw it from (although I vaguely think it might have been in a tutorial).

Thanks

MikeB

7 Jul 2010, 5:24 PM

Thanks but I just found my answer. It WAS in the "basic collapsible panel example (http://www.sencha.com/deploy/dev/examples/panel/panels.html)" and the solution is to use the "preventBodyReset: true" panel configuration option.