[SOLVED] Adjust size of checkbox label to grid column size

Adjust size of checkbox label to grid column size

I'm using the <fieldset data-role="controlgroup" data-type="horizontal"> option for checkbox buttons because I want to hide my checkbox and highlight the button if its selected. Of course that works fine, but how can I size the label to the size of the grid column (using ui-grid-c).

Code Example: https://jsfiddle.net/sebsti/z0Lywgd1/

<!doctype html>
<html lang="en"> 
   <head>
   <meta charset="utf-8">
   <!-- Include meta tag to ensure proper rendering and touch zooming -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Include jQuery Mobile stylesheets -->
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
   <!-- Include the jQuery library -->
   <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
   <!-- Include the jQuery Mobile library -->
   <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
    <div data-role="main" class="ui-content">
                <div class="ui-grid-c">
                    <div class="ui-block-a"></div>
                    <div class="ui-block-b">
                            <fieldset data-role="controlgroup" data-type="horizontal" >
                                <input type="checkbox" name="checkbox-h-1a" id="checkbox-h-1a">
                                <label for="checkbox-h-1a">Option 1</label>
                            </fieldset>
                            <fieldset data-role="controlgroup" data-type="horizontal" >
                                <input type="checkbox" name="checkbox-h-1b" id="checkbox-h-1b">
                                <label for="checkbox-h-1b">Option 2</label>
                            </fieldset>
                            <input type="checkbox" name="checkbox-h-1c" id="checkbox-h-1c">
                            <label for="checkbox-h-1c" class="width">Like this</label>
                    </div>
                    <div class="ui-block-c ">
                            <fieldset data-role="controlgroup" data-type="horizontal" >
                                <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
                                <label for="checkbox-h-2a">Option 3</label>
                            </fieldset>
                            <fieldset data-role="controlgroup" data-type="horizontal" >
                                <input type="checkbox" name="checkbox-h-2b" id="checkbox-h-2b">
                                <label for="checkbox-h-2b" class="width">Option 4</label>
                            </fieldset>
                                <input type="checkbox" name="checkbox-h-2c" id="checkbox-h-2c">
                                <label for="checkbox-h-2c" class="width">Like this</label>
                    </div>
                    <div class="ui-block-d"></div>
                </div>
   </div>
</div>
</body>

</html>

Solution

You can just add CSS that make the label 100% width:

.ui-controlgroup .ui-checkbox label {
    width: 100%;
    margin-left: 5px; 
}

Updated FIDDLE

Note: you might not need the left margin if you are not actually lining up with regular checkboxes...