jQM 1.4 100% controlgroup

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="header"> 
         <h1>Main Page</h1>
    </div>
    <div role="main" class="ui-content">
        
<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>        

    </div>
</div>

CSS

#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;
}