Opened 11 years ago
Closed 11 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)
Change History (17)
comment:1 Changed 11 years ago by
comment:2 Changed 11 years ago by
| Component: | General → Core |
|---|---|
| Milestone: | tbd → future |
| Owner: | changed from anonymous to Eugene Lazutkin |
| Status: | new → assigned |
comment:3 Changed 11 years ago by
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
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
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
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
| Attachment: | important.html added |
|---|
Changed 11 years ago by
| Attachment: | important.2.html added |
|---|
updated test case showing unexpected inline style="... !important" behavior
comment:7 Changed 11 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | assigned → closed |
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 follow-up: 9 Changed 11 years ago by
| Resolution: | invalid |
|---|---|
| Status: | closed → reopened |
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 Changed 11 years ago by
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 follow-up: 11 Changed 11 years ago by
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 11 years ago by
| Attachment: | importantJS.html added |
|---|
test setting !important inline style programatically
comment:11 Changed 11 years ago by
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 11 years ago by
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 11 years ago by
| Attachment: | importantJS.2.html added |
|---|
test setting !important style.color programatically, fails on FF and safari
comment:13 Changed 11 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | reopened → closed |
Closing again as invalid (the functionality is not provided by HTML DOM).
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?