Opened 9 years ago

Closed 7 years ago

Last modified 6 years ago

#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 Changed 9 years ago by Jörn Zaefferer

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

comment:2 in reply to:  1 ; Changed 9 years ago by 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.

comment:3 in reply to:  2 Changed 9 years ago by 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).

comment:4 Changed 8 years ago by M.Gaetan89

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

comment:5 Changed 7 years ago by Scott González

Milestone: TBD1.10.0

comment:6 Changed 7 years ago by Jörn Zaefferer

Type: featurebug

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 7 years ago by Jörn Zaefferer

Summary: Add "blank" icon to cssCSS Framework: Don't show icon when only ui-icon class is present

comment:8 Changed 7 years ago by Jörn Zaefferer

Resolution: fixed
Status: newclosed

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 7 years ago by 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
}

comment:10 Changed 7 years ago by Scott González

Milestone: 1.10.0
Resolution: fixed
Status: closedreopened

comment:11 Changed 7 years ago by Scott González

Resolution: wontfix
Status: reopenedclosed

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

comment:12 Changed 6 years ago by tj.vantoll

#9720 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.