Changing width of checkbox in JQuery Mobile using CSS?

Question

I'm trying to set the width of my 3 checkboxes to be 33% each, but no matter what I do I'm not able to change the width at all.

The form/fieldset portion of my HTML looks like this:

<form class="form_attendance">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="form_attendance">
    <legend>Attendance</legend>
    <input type="checkbox" name="checkbox1" id="checkbox1" class="selector">
    <label for="checkbox1">1</label>
    <input type="checkbox" name="checkbox2" id="checkbox2" class="selector">
    <label for="checkbox2">2</label>
    <input type="checkbox" name="checkbox3" id="checkbox3" class="selector">
    <label for="checkbox3">3</label>
</fieldset>
</form>

I've tried setting different widths to the input- form- and fieldset-components in CSS using both class and id but nothing happens.

Does anyone have any idea?

Sebsemillia · Accepted Answer · 2014-04-23 12:00:05Z

2

jQuery Mobile adds extra classes and html elements to your code. You need to target those. Best is if you use your browser inspector to check which elements you need to target.

In you case you need this CSS:

#form_attendance .ui-controlgroup-controls {
    width: 100%
}

#form_attendance .ui-checkbox {
    width: 33%;
}

Working Fiddle

answered Apr 23, 2014 at 12:00

Sebsemillia

9,4863 gold badges58 silver badges72 bronze badges

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

Collectives™ on Stack Overflow

Changing width of checkbox in JQuery Mobile using CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related