#5659 closed bug (wontfix)
CSS Framework: Don't show icon when only ui-icon class is present
Reported by: | mikepelley | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | |
Component: | ui.css-framework | Version: | |
Keywords: | icon | Cc: | |
Blocked by: | Blocking: |
Description
When building a UI where an icon can be toggled, such as the checkmark, one might want to have a "blank" icon available as a placeholder when the toggle is "off".
For example, this would make it possible to create a "clickable" box that toggles by just changing the class list for the icon's span tag.
The implementation would only require one line of css, as the image already has blank areas. For example (in /themes/base/jquery.ui.theme.css):
/* positioning */ .ui-icon-blank { background-position: -160px 0; }
Change History (12)
comment:1 follow-up: 2 Changed 13 years ago by
comment:2 follow-up: 3 Changed 13 years ago by
Replying to joern.zaefferer:
I don't understand your "clickable box" example - could you elaborate on that?
Well, one could create a switch between the checkmark and blank icons using something like this (untested):
$('#checkfield').removeClass('ui-icon-check').addClass('ui-icon-blank');
To be more generic, though, I guess my thought was that it would be nice to have a blank that renders the same as an icon, so that a list of "checked" and "unchecked" items look consistent. Another solution might be to change the big image so that the top left icon is blank. Then
class="ui-icon"
would render empty, and
class="ui-icon ui-icon-check"
would render as a checkmark. Right now, the first renders as an arbitrary icon, i.e. whatever happens to be in the top left corner.
comment:3 Changed 13 years ago by
And the javascript would be simpler:
$('#checkfield').removeClass('ui-icon-check');
to "uncheck" and
$('#checkfield').addClass('ui-icon-check');
to "check" (assuming the element also has the 'ui-icon' class of course).
comment:4 Changed 12 years ago by
I propose a solution for this on GitHub : https://github.com/jquery/jquery-ui/pull/516
comment:5 Changed 11 years ago by
Milestone: | TBD → 1.10.0 |
---|
comment:6 Changed 11 years ago by
Type: | feature → bug |
---|
The PR was closed with this comment: "I don't see any reason to add an additional class ui-icon-blank. What's broken is that an icon is displayed when only the ui-icon class is present. Let's fix that by changing the background-position of that class. I also don't see a reason to take up a cell in the image, just shift the image out of view."
So the actual fix we need is to change the background-position property of the ui-icon class to point at something that's blank.
comment:7 Changed 11 years ago by
Summary: | Add "blank" icon to css → CSS Framework: Don't show icon when only ui-icon class is present |
---|
comment:8 Changed 11 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
CSS Framework: Set out-of-view background-position for ui-icon. Fixes #5659 - CSS Framework: Don't show icon when only ui-icon class is present.
Changeset: 1fe06f03fac30ce76b87eab8c5a9acc72becd587
comment:9 Changed 10 years ago by
This change should probably be mentioned in the v1.10 upgrade guide, as I just spent about two hours trying to figure out why my custom icons were not showing up in v1.10 when everything was fine in v1.9.
I was defining my own icons for buttons via:
$("#create_otb").button({ label: 'Create', icons: { primary: 'ui-icon-x-accept', secondary: null } });
with the following css:
.ui-icon-x-accept { background-image: url('/Images/icons/accept.png') !important; }
Because of the position change from this ticket, I had to manually zero out the position like such:
.ui-icon-x-accept { background-image: url('/Images/icons/accept.png') !important; background-position: 0% 0% !important }
comment:10 Changed 10 years ago by
Milestone: | 1.10.0 |
---|---|
Resolution: | fixed |
Status: | closed → reopened |
comment:11 Changed 10 years ago by
Resolution: | → wontfix |
---|---|
Status: | reopened → closed |
This was reverted in 4f95a0f396965e91982f1b5e67da814bb6640ce1 based on @dlong500's comment. See #9150.
I don't understand your "clickable box" example - could you elaborate on that?