Opened 11 years ago

Closed 10 years ago

#9148 closed defect (invalid)

Can't set !important property when using dojo.style setter

Reported by: mojowww Owned by: Eugene Lazutkin
Priority: high Milestone: future
Component: Core Version: 1.3.0
Keywords: style Cc:
Blocked By: Blocking:

Description

Tried two methods

dojo.style(element, "width", "800px !important")

and

dojo.style(element, "width", "800px", "!important")

both fail to set any value for width

Attachments (4)

important.html (588 bytes) - added by dante 11 years ago.
important.2.html (851 bytes) - added by dante 11 years ago.
updated test case showing unexpected inline style="... !important" behavior
importantJS.html (1.0 KB) - added by bill 10 years ago.
test setting !important inline style programatically
importantJS.2.html (1.1 KB) - added by bill 10 years ago.
test setting !important style.color programatically, fails on FF and safari

Download all attachments as: .zip

Change History (17)

comment:1 Changed 11 years ago by dante

dojo.style(el, "width", "800px") overrides any CSS rules or previously applied styles. Why is it that you need to set !important on a style property you are setting with javascript?

comment:2 Changed 11 years ago by Eugene Lazutkin

Component: GeneralCore
Milestone: tbdfuture
Owner: changed from anonymous to Eugene Lazutkin
Status: newassigned

comment:3 Changed 11 years ago by mojowww

The !important rule overrides inline css. Here is a quick example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.important_class{background-color:red !important;}
.regular_class{background-color:yellow;}
</style>
</head>
<body>


<div class="important_class regular_class" style="background-color:blue">
TEST
</div>

</body>
</html>

comment:4 Changed 11 years ago by dante

right, and setting the style via JS is functionally identical to !important:

<div id="test" class="important_class regular_class" style="background-color:blue"></div>
...
dojo.style("test", "backgroundColor", "cyan"); // always wins

that will take precedence over even the !important class, and there is nothing we can do about it. You can also add a class with an !important rule to a node:

<div id="test" class="regular_class"></div>
dojo.addClass("test", "important_class");

in this case, the background will be red.

comment:5 Changed 11 years ago by dante

In case I'm not being clear: using dojo.style is just like setting !important for a rule, and I think this ticket is invalid. I am trying to figure out if there is some use case here I'm not considering, but nothing is coming to mind.

comment:6 Changed 11 years ago by dante

my humble apologies - this is why test cases are so vital. attached is a sample clearly reproducing what I presume you are experiencing. Thanks wildbill for pointing this out, I've never hit it.

Changed 11 years ago by dante

Attachment: important.html added

Changed 11 years ago by dante

Attachment: important.2.html added

updated test case showing unexpected inline style="... !important" behavior

comment:7 Changed 11 years ago by Eugene Lazutkin

Resolution: invalid
Status: assignedclosed

Not possible to set such styles with JavaScript? in a portable fashion. Apparently the only way to go about "!important" is to modify style sheets dynamically.

comment:8 Changed 10 years ago by bill

Resolution: invalid
Status: closedreopened

Regarding attachment:important.2.html, it's working correctly for me on all the browsers I tested: safari, ff3/mac, and IE6. It shows as:

hi !important


me?

That's the correct behavior (IIUC) since the style tags override class tags (regardless of the order the style and class attribute are declared in, i.e. class=bar style=... is treated the same as style=... class=bar).

Why is it impossible to set styles with javascript portably? Is the problem on a browser I didn't test? Or is there an issue w/modifying the style attribute rather than setting it initially?

We might want to close this as wontfix but it doesn't seem like the ticket itself is invalid.

comment:9 in reply to:  8 Changed 10 years ago by Eugene Lazutkin

Replying to bill:

Regarding attachment:important.2.html, it's working correctly for me on all the browsers I tested: safari, ff3/mac, and IE6.

Did you try to remove !important from inline styles and check the result?

Another fun thing to do: try to set an inline style from JavaScript?, e.g., like in the description of the ticket:

dojo.style(element, "width", "800px !important");

...or anything else relevant.

comment:10 Changed 10 years ago by bill

Well I was hoping you would tell me the answer so I wouldn't have to try it myself, since you closed the ticket saying that it's impossible.

Anyway, I tried it now. It works fine. It's just dojo that's broken. See attachment:importantJS.html.

Changed 10 years ago by bill

Attachment: importantJS.html added

test setting !important inline style programatically

comment:11 in reply to:  10 Changed 10 years ago by Eugene Lazutkin

Replying to bill:

Your example replaces the whole cssText, not individual style components, as in the ticket description. It is not the same. Are you suggesting that we should parse cssText, replace proper components, and set it back? Try setting any complex property in different browsers and reading it back. My personal favorites: background, border, margin, padding.

PS: No, there is no standard for cssText, so every browser supports it differently.

PPS: It may be a relatively good candidate for dojox.style, if we were able to solve the problem of complex properties.

comment:12 Changed 10 years ago by bill

Oh I see, there are problems when setting style.color directly on safari and FF (and maybe on IE too, I didn't test it).

PS: I'm not suggesting anything, this doesn't seem like an important thing to support, no pun intended.

Changed 10 years ago by bill

Attachment: importantJS.2.html added

test setting !important style.color programatically, fails on FF and safari

comment:13 Changed 10 years ago by Eugene Lazutkin

Resolution: invalid
Status: reopenedclosed

Closing again as invalid (the functionality is not provided by HTML DOM).

Note: See TracTickets for help on using tickets.