jquery mobile radio button group to fit 100% of width

jquery-mobile

Solution

I assume you want the CSS the get the controlgroup looking like the image ?

If so, here is your HTML with all styles removed and some typos fixed:

<div id="myGroup" data-role="fieldcontain"> 
    <fieldset data-role="controlgroup"   data-type="horizontal"  data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
        <legend >גודל</legend>
        <input type="radio" name="radio-strength" id="radio-view-a" value="גדול" class="blabla" style="background-color: #BF8F54;"/>
        <label for="radio-view-a" >גדול: 10.50 &#8362;</label>
        <input class="blabla" type="radio" name="radio-strength" id="radio-view-b" value="בינוני" checked="checked"/>
        <label for="radio-view-b" >בינוני: 6.30 &#8362;</label>
        <input class="blabla" type="radio" name="radio-strength" id="radio-view-c" value="קטן"  />
        <label for="radio-view-c" >קטן: 5.70 &#8362;</label>
    </fieldset>
</div>   

I added an ID to the fieldcontain so we could limit the CSS rules to things in this container:

#myGroup {
    font-size: 84%;
}
#myGroup .ui-controlgroup-label{
    float: none;
    display: block;
    text-align: center;
    width: 100%;
}
#myGroup .ui-controlgroup-label legend{
    font-weight: bold;
    font-size: 130%;   
    width: 100%;
    margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
    float: none; 
    display: block;
    width: 100%;
}
#myGroup .ui-radio{
    width: 33.33%;
}
#myGroup .ui-radio label{
    text-align: center;
    white-space: nowrap;
}

DEMO

Problem

Original source

Related problems

• resize font to fit in a div (on one line)