CODEWITHSUNDEEP
csslayoutjquery-mobile
Riccardo Cestari
Riccardo Cestari

Reputation: 113

Radio Buttons Width

I need to change the width of a grouped radio button but I can't do it. I've tried to add style=width:...px but it doesn't work.

I am using jQuery Mobile and Cordova.

How can I fix it?

HTML

<div data-role="fieldcontain" data-inline="true">
    <fieldset data-role="controlgroup" data-inline="true">
        <legend>Question1:</legend>
        <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
        <label for="radio-choice-1">OK</label>
        <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"/>
        <label for="radio-choice-2">KO</label>
        <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"/>
        <label for="radio-choice-3">N.A.</label>
        <input type="text" name="name" id="basic" value=""/>
    </fieldset>
</div>

Upvotes: 1

Views: 6510

Answers (1)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262979

Try applying width styles to the <label> elements:

<div data-role="fieldcontain" data-inline="true">
    <fieldset data-role="controlgroup" data-inline="true">
        <legend>Question1:</legend>
        <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
        <label for="radio-choice-1" style="width: 100px;">OK</label>
        <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"/>
        <label for="radio-choice-2" style="width: 100px;">KO</label>
        <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"/>
        <label for="radio-choice-3" style="width: 100px;">N.A.</label>
        <input type="text" name="name" id="basic" value=""/>
    </fieldset>
</div>

You can see the results in this fiddle.

Note that if you want all the labels to have the same width, creating a CSS rule that assigns that width to a class then adding that class to your labels will reduce code duplication.

Upvotes: 1

Related Questions