How do I use jquery-ui checkbox within widget?

Question

I am using a jquery-ui checkbox within a container that has class ui-widget-content on it. This is causing the ".ui-widget-content .ui-state-hover" css rule that defines the background property to override the .ui-icon-check rule that defines the correct background-position for the checkbox image. I believe this is because it is more specific.

The result is that a checkbox within a widget shows the wrong image. How should I handle this?

Here is a jsfiddle example. In the second div where I have the ui-widget-content class, you can see the checked image is wrong.

<div class="ui-widget-content">
<label for="cb3">Test 1</label>
<input type="checkbox" id="cb3" class="toggle"/>
<label for="cb4">Test 2</label>
<input type="checkbox" id="cb4" class="toggle" checked="checked"/>
</div>

Note that I can't change the parent div. I am working within a dialog that requires that class.

I am surprised I can't find anybody else complaining about this. I am not sure what I am missing.

Twisty · Accepted Answer · 2016-09-30 16:27:44Z

1

So the .ui-icon-check class is being overwritten by a later style. You can just write it back.

One Example: https://jsfiddle.net/Twisty/ewabcy3g/2/ (Fixed for blank)

CSS

.ui-widget-content label span.ui-icon-check {
  background-position: -64px -144px;
}
.ui-widget-content label span.ui-icon-blank {
  background-position: 16px 16px;
}

Another Example: https://jsfiddle.net/Twisty/ewabcy3g/1/

jQuery

$('.nonwidget,.ui-widget-content').controlgroup({
  "direction": "vertical"
}).find(".ui-icon-check").css("background-position", "-64px -144px");

Hope that helps.

Update

Found something interesting, still a bit of a hack but it seems to help:

https://jsfiddle.net/Twisty/ewabcy3g/3/

When I removed the checked attribute and set it via jQuery, like so:

$('.toggle').checkboxradio();
$("#cb4").attr("checked", true);
$('.nonwidget,.ui-widget-content').controlgroup({
  "direction": "vertical"
});

I could remove the CSS hacks. I found that setting the CSS positioning back, it was still reading the hover background image and not retaining the proper styling.

I then tried adding checked="checked" back to the HTML and it got screwed up again.

edited Sep 30, 2016 at 16:27

answered Sep 30, 2016 at 15:46

Twisty

31k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Backslider Over a year ago

It helps a little, I guess. It seems like a total hack for a jquery-ui bug. Your examples don't fully work, either, because when you uncheck the box, it is messed up again. So I'd have to redefine at least ui-icon-check and ui-icon-blank.

Twisty Over a year ago

@Backslider the second example works better. I see what you're saying regarding the first example. What I see happening is that .ui-widget-content .ui-state-hover class is resetting the value to 50%, 50%.

Backslider Over a year ago

I actually am setting the checked property through code. I think the difference is that I was setting it before calling checkboxradio(). If I move it to after, that causes it not to put the hover class on, I think, which makes the styles stay in the right order.

Collectives™ on Stack Overflow

How do I use jquery-ui checkbox within widget?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related