#5659 closed bug (wontfix)

Opened May 26, 2010 06:14PM UTC

Closed March 11, 2013 04:00PM UTC

Last modified December 26, 2013 02:26PM UTC

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; }

Attachments (0)
Change History (12)

Changed May 26, 2010 06:21PM UTC by jzaefferer comment:1

I don't understand your "clickable box" example - could you elaborate on that?

Changed May 26, 2010 09:55PM UTC by mikepelley comment:2

Replying to [comment:1 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.

Changed May 26, 2010 09:57PM UTC by mikepelley comment:3

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).

Changed November 06, 2011 01:39PM UTC by M.Gaetan89 comment:4

I propose a solution for this on GitHub : https://github.com/jquery/jquery-ui/pull/516

Changed October 11, 2012 09:02PM UTC by scottgonzalez comment:5

milestone: TBD → 1.10.0

Changed November 04, 2012 04:08PM UTC by jzaefferer comment:6

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.

Changed November 04, 2012 04:10PM UTC by jzaefferer comment:7

summary: Add "blank" icon to css → CSS Framework: Don't show icon when only ui-icon class is present

Changed November 04, 2012 04:11PM UTC by Jörn Zaefferer comment:8

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

Changed January 22, 2013 10:00AM UTC by dlong500 comment:9

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
}

Changed March 11, 2013 03:59PM UTC by scottgonzalez comment:10

milestone: 1.10.0
resolution: fixed
status: closed → reopened

Changed March 11, 2013 04:00PM UTC by scottgonzalez comment:11

resolution: → wontfix
status: reopened → closed

This was reverted in 4f95a0f396965e91982f1b5e67da814bb6640ce1 based on @dlong500's comment. See #9150.

Changed December 26, 2013 02:26PM UTC by tj.vantoll comment:12

#9720 is a duplicate of this ticket.