CSS styling for checkbox in JQuery Mobile (extra checkbox)

Question

Having trouble obtaining the correct css to create a check list in jqm. with the help of Make checkbox larger in Jquery Mobile I was able to get a larger checkbox but the results created new checkbox in undesired location? my label elements seem to be creating extra checkbox where my html doesn't have one. see JSFiddle example.

outer label tag is producing a checkbox and css sizing desired to make box larger is only applied to outer label box (the one that shouldn't even be there).

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<div data-role="page" data-theme="b" id="acs">
<div data-role="header">
  <h2>Key Performance Indicators</h2> 
</div>

<div data-role="content">    
  <ul data-role="listview" data-theme="b">   
    <li>
      <h1>Assess Cardiac Risk Factors</h1>                                     
       <label>                                               
       <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>      
       <label for="checkbox-2b">
         <label> 
           <h3>Age</h3>
         </label> 
       </label>
       </label>                                              

       <label>
       <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>      
       <label for="checkbox-2b">
         <label> 
           <h3>Diabetes</h3>
         </label> 
       </label>
       </label>
  </li>
 </ul>     
</div>

<div data-role="footer">
<div data-role="navbar">
</div>
</div>
<div>
  <h4>My Footer</h4>
</div>        

</div>

CSS

#checkbox-2b {
-ms-transform: scale(6); /* IE */
-moz-transform: scale(6); /* FF */
-webkit-transform: scale(6); /* Safari and Chrome */
-o-transform: scale(6); /* Opera */
padding: 10px;
}

jcarrera · Accepted Answer · 2016-03-18 18:04:56Z

1

I have updated your fiddle -> http://jsfiddle.net/xxdrf87q/7/

Looking to the documentation the right way for doing a checkbox with it's label is this:

<label>
      <input type="checkbox" name="checkbox-0 ">Check me
</label>

So I changed this part:

<label>
    <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/>  Age
</label>                                              
<label>
    <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="b"/> Diabetes
</label>

answered Mar 18, 2016 at 18:04

jcarrera

1,0661 gold badge17 silver badges25 bronze badges

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

2 Comments

BarclayVision Over a year ago

Thanks so much, Thats exactly what I wanted to accomplish. - If I need the checkbox bigger just increase the webkit and the z- var?

jcarrera Over a year ago

Increasing the -webkit-transform: scale value, yes. The z-index is for putting the check in the top layer.

BarclayVision · Accepted Answer · 2016-03-19 12:42:39Z

Thanks to jcarrera for the fix, to clarify my final issue here was the resolution to the multiple check boxes unsolicited: The css needed to add z-index: 2; to apply to top layer checkbox and remove id from the label elements. Cleaned up extra code by removing extra label tags not needed.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

 <div data-role="page" data-theme="b" id="acs">
 <div data-role="header">
   <h2>Key Performance Indicators</h2> 
 </div>

 <div data-role="content">    
   <ul data-role="listview" data-split-icon="gear" data-theme="c">   

   <h1>Assess Cardiac Risk Factors</h1>                                     
     <label>                                               
     <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>                
         <h3>Age</h3>
     </label>                                              

     <label>
     <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>                
         <h3>Diabetes</h3>
     </label>
    </ul>     
   </div>
  <div data-role="footer">
  <div data-role="navbar">
  </div>    
    <h4>John Doe</h4>
  </div>        
</div>

Collectives™ on Stack Overflow

CSS styling for checkbox in JQuery Mobile (extra checkbox)

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related