JQuery UI - Improper checkbox state icon using .checkboxradio() and .tabs()

Question

I've some trouble to properly render a selected checkbox when put inside a tabs widget.

Outside the tabs the checkboxes renders correctly.

I prepared a JSFiddle showing the issue: https://jsfiddle.net/x30gzqo4/8/

$( function() {
  $(".checkbox").checkboxradio();
  $("#guestsData").tabs();
});

div {
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<div>
  <label for="test0">This is checked and works</label>
  <input type="checkbox" class="checkbox" id="test0" value="yes" checked="checked" />
</div>
<div id="guestsData">
  <ul>
    <li><a href="#guest-0">Tab 0</a></li>
    <li><a href="#guest-1">Tab 1</a></li>
    <li><a href="#guest-2">Tab 2</a></li>
    <li><a href="#guest-3">Tab 3</a></li>
  </ul>
  <div id="guest-0">
    <div>
      <label for="test1">This is checked and don't works!</label>
      <input type="checkbox" class="checkbox" id="test1" value="yes" checked="checked" />
    </div>
    <div>
      <label for="test2">This is unchecked</label>
      <input type="checkbox" class="checkbox" id="test2" value="yes" />
    </div>
  </div>
  <div id="guest-1">
    Tab 1 content
  </div>
  <div id="guest-2">
    Tab 2 content
  </div>
  <div id="guest-3">
    Tab 3 content
  </div>
</div>

Any help or idea is strongly appreciated.

Thank you for your help.

score 2 · Answer 1 · answered Jan 19 '18 at 09:35

Finally I solved the issue rendering the page normally with all fields empty (and checkboxes unchecked!), then execute an ajax query and filling the form (and checking the checkboxes...) with Javascript:

$("#guest").prop("checked", true);
$("#guest").button("refresh");

Please don't forget the refresh!! ;-)

Louys Patrice Bessette · Answer 2 · 2018-01-16T20:19:02.523

Seems like to be some kind of a JS conflict between .tabs() and .checkboxradio()!!!

And it is about the background-position of the icon located in that nice .png.

It is used as a background and its background-position setted to 0% 0% via JS...
Which correspond to the top-left icon.
And you want the one in the 5th column, 9th row.

So the position for this one is -5 * 16px and -9 * 16px which is, in clear:

"background-position":"-64px -144px"

It took time to nail that!
It absolutely has to be fixed by JS, since a slight delay is needed to override the glitch.
1ms seems to be enougth to apply the "bug fix".
(That really is the right term!).

$(document).ready(function(){
  $( function() {
    $("#guestsData").tabs();
    $(".checkbox").checkboxradio();
  });

  setTimeout(function(){
    var target = $(document).find("#test1").prev().find("span").first();
    
    console.log(target.css("background-position"));
    target.css({"background-position":"-64px -144px"});
    console.log(target.css("background-position"));
  },1);
});

div {
  margin: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<div>
  <label for="test0">This is checked and works</label>
  <input type="checkbox" class="checkbox" id="test0" value="yes" checked />
</div>

<div id="guestsData">
  <ul>
    <li><a href="#guest-0">Tab 0</a></li>
    <li><a href="#guest-1">Tab 1</a></li>
    <li><a href="#guest-2">Tab 2</a></li>
    <li><a href="#guest-3">Tab 3</a></li>
  </ul>

  <div id="guest-0">
    <div>
      <label for="test1">This is checked and works fine when a <b>BUG FIX</b> is applied!</label>
      <input type="checkbox" class="checkbox" id="test1" value="yes" checked />
    </div>
    <div>
      <label for="test2">This is unchecked</label>
      <input type="checkbox" class="checkbox" id="test2" value="yes" />
    </div>
  </div>

  <div id="guest-1">
    Tab 1 content
  </div>


  <div id="guest-2">
    Tab 2 content
  </div>


  <div id="guest-3">
    Tab 3 content
  </div>
</div>

EDIT!

I just found a better way to fix that for all checkboxes in tabs.
(And be able to uncheck them!!)

Only a function that will run on document ready... And two classes are needed.

$(document).ready(function(){
  $( function() {
    $("#guestsData").tabs();
    $(".checkbox").checkboxradio();
  });

  setTimeout(function(){
    
    // Fixes the checkbox at checked state on load 
    var target = $(document).find(".ui-tabs .ui-checkboxradio-icon.ui-icon-check")

    // Apply the bugfix.
    target.addClass("bugfix");

    // Handler to "unfix" now...
    target.on("click",function(){
      $(this).toggleClass("unchecked")
    });

  },1);
  
});

div {
  margin: 20px;
}

.bugfix{
  background-position:-64px -144px !important;
}
.bugfix.unchecked{
  background-position:100% 100% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<div>
  <label for="test0">This is checked and works</label>
  <input type="checkbox" class="checkbox" id="test0" value="yes" checked />
</div>

<div id="guestsData">
  <ul>
    <li><a href="#guest-0">Tab 0</a></li>
    <li><a href="#guest-1">Tab 1</a></li>
    <li><a href="#guest-2">Tab 2</a></li>
    <li><a href="#guest-3">Tab 3</a></li>
  </ul>

  <div id="guest-0">
    <div>
      <label for="test1">This is checked and works fine when a <b>BUG FIX</b> is applied!</label>
      <input type="checkbox" class="checkbox" id="test1" value="yes" checked />
    </div>
    <div>
      <label for="test2">This is unchecked</label>
      <input type="checkbox" class="checkbox" id="test2" value="yes" />
    </div>
  </div>

  <div id="guest-1">
    Tab 1 content
  </div>


  <div id="guest-2">
    Tab 2 content
  </div>


  <div id="guest-3">
    Tab 3 content
  </div>
</div>

score 1 · Answer 3 · answered Jan 17 '18 at 15:58

When you inspect the element, you can see that background-position is being overruled by .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus.

We need to improve the Specificity of .ui-icon-checked in CSS to ensure it used.

To correct this, you can do it in CSS:

$(function() {
  $(".checkbox").checkboxradio();
  $("#guestsData").tabs();
});

div {
  margin: 20px;
}

label.ui-checkboxradio-label span.ui-icon-check {
  background-position: -64px -144px;
}

label.ui-checkboxradio-label span.ui-icon-blank {
  background-position: 16px 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />

<div>
  <label for="test0">This is checked and works</label>
  <input type="checkbox" class="checkbox" id="test0" value="yes" checked="checked" />
</div>
<div id="guestsData">
  <ul>
    <li><a href="#guest-0">Tab 0</a></li>
    <li><a href="#guest-1">Tab 1</a></li>
    <li><a href="#guest-2">Tab 2</a></li>
    <li><a href="#guest-3">Tab 3</a></li>
  </ul>
  <div id="guest-0">
    <div>
      <label for="test1">This is checked and don't works!</label>
      <input type="checkbox" class="checkbox" id="test1" value="yes" checked="checked" />
    </div>
    <div>
      <label for="test2">This is unchecked</label>
      <input type="checkbox" class="checkbox" id="test2" value="yes" />
    </div>
  </div>
  <div id="guest-1">
    Tab 1 content
  </div>
  <div id="guest-2">
    Tab 2 content
  </div>
  <div id="guest-3">
    Tab 3 content
  </div>
</div>

Reference: What are the implications of using "!important" in CSS?

Douglas Batista · Answer 4 · 2018-05-10T19:37:22.187

Problem solved simply reinforcing two css classes for the background image positioning. For some reason, the positioning of the background image is dislocated in conflict with the Tab css classes.

You can test my JSFiddle with the solution: https://jsfiddle.net/ws68uzbj/

$( function() {
    $(".checkbox").checkboxradio();
    $("#guestsData").tabs();
});

div {
  margin: 20px;
}

.ui-icon-blank {
    background-position: 16px 16px !important;
}

.ui-icon-check {
    background-position: -64px -144px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<div>
  <label for="test0">This is checked and works</label>
  <input type="checkbox" class="checkbox" id="test0" value="yes" checked="checked" />
</div>

<div id="guestsData">
  <ul>
    <li><a href="#guest-0">Tab 0</a></li>
    <li><a href="#guest-1">Tab 1</a></li>
    <li><a href="#guest-2">Tab 2</a></li>
    <li><a href="#guest-3">Tab 3</a></li>
  </ul>

  <div id="guest-0">
    <div>
      <label for="test1">This is checked and don't works!</label>
      <input type="checkbox" class="checkbox" id="test1" value="yes" checked="checked" />
    </div>
    <div>
      <label for="test2">This is unchecked</label>
      <input type="checkbox" class="checkbox" id="test2" value="yes" />
    </div>
  </div>
  
  <div id="guest-1">
    Tab 1 content
  </div>
  
  
  <div id="guest-2">
    Tab 2 content
  </div>
  
    
  <div id="guest-3">
    Tab 3 content
  </div>
</div>

It seems to be a race condition between the hover css and regular css states, but overriding them with combo classes did the trick for me. Anything to make these two background-position, background-color, and border styles to resolve properly. Sometimes I suspect Firebug is also causing the condition. — justdan23, Sep 17 '18 at 21:44

score 1 · Answer 5 · edited Sep 06 '18 at 15:34

1

I was getting same problem with controlgroup. Finally, I add some style and it work with all jquery ui theme

.ui-icon-blank {
  background-image: none !important;    
  background-color: #ffffff !important; 
}
.ui-icon-check {
  background-color: #ffffff !important;
  background-position: -64px -144px !important;
}

edited Sep 06 '18 at 15:34

MaanooAk

2,418
17
28

answered Sep 06 '18 at 14:03

olivier

11
2

You can also use a more complex css rule to take precidence to avoid having to use #important. While #important works, I save it for when I have some varying mixes from multiple JS open source modules. – justdan23 Sep 17 '18 at 21:46

score 0 · Answer 6 · edited Sep 30 '19 at 20:53

May be related to the fact that radio checkboxes live within a ".tab" classed element.

Somehow after post POST submission, if these radio checkboxes had been checked prior to submission, the 'ui-state-hover' CSS class gets applied to the first span in the label but only removing it will make the checkmark properly render instead of a caret like ^ symbol from upper-left of the jquery theme .png image.

Selector is the label's id attribute (label related to the radio checkbox input element).

$("#other-btn").find("span").first().removeClass("ui-state-hover");

JQuery UI - Improper checkbox state icon using .checkboxradio() and .tabs()

6 Answers6

EDIT!