CSS Framework: Don't show icon when only ui-icon class is present

[mikepelley]

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

[Jörn Zaefferer]

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

[mikepelley]

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.

[mikepelley]

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

[M.Gaetan89]

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

[Jörn Zaefferer]

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.

[Jörn Zaefferer]

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

[dlong500]

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
}

[Scott González]

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

[tj.vantoll]

#9720 is a duplicate of this ticket.