ICheck not working with bootstrap table

Question

I'm using iCheck(v1.0.2) jquery plugin for checkboxes with Admin LTE template. iCheck is working fine except the bootstrap tables. While inspecting element in chrome developer tool I can find div created by the plugin inside the <td> but it isn't visible.

Here is the html

   <div class="table-responsive">
     <table class="table table-bordered table-striped table-condensed">
       <thead>
         <tr>
           <th>Functionality</th>
           <th>View</th>
           <th>Add</th>
           <th>Edit</th>
           <th>Delete</th>
         </tr>
       </thead>   
       <tbody>
         <tr>
           <td>New Function</td>
           <td><input type="checkbox" class="icheck"></td>
           <td><input type="checkbox" class="icheck"></td>
           <td><input type="checkbox" class="icheck"></td>
           <td><input type="checkbox" class="icheck"></td>
         </tr>
       </tbody>
     </table>
   </div>

Jquery:

   <script>
     $(function () {
       $('.icheck').iCheck();
      });
   </script>

Developer tool:

Don't consider the console error. It's about the favicon.ico. How can I resolve this?

Answer 1

I was facing the same problem on chrome while using datatables with iCheck and after searching for 3 hrs this is the only post I found discussing the issue. After researching around following did the trick for me.

you need to add relative position css to the element ins.

 $('.iCheck-helper').css('position', 'relative');

if you are using it inside column use it inside your rowCallBack.

$(nRow).find(':checkbox,:radio').iCheck();
$(nRow).find('.iCheck-helper').css('position', 'relative');

Hope it makes someones day easy.