title: jquery mobile control group with different width of radiobutton input in ui-grid-b
body: <p>Hello i have a difficulty in setting up the width for the input radio button.</p>
  
  <p>As you can see i'm using a ui-grid-b. the problem here is in the ui-block-c.. where in block-c i'm insert the control group for the radio button. I want to set the width for radio button for id 'full' is 60%, radio button id'half' is 20% and for the radio button id'one' is 20%.. which mean it total 100% that equal to the width for the ui-controlgroup-controls. i want to use the maximum width for the ui-controlgroup-controls with the different width for each radio button</p>
  
  <pre><code>        &lt;style&gt;
          .ui-grid-b&gt;.ui-block-a {
              width: 25%;
          }
          .ui-grid-b&gt;.ui-block-b, .ui-grid-b&gt;.ui-block-c {
              width: 15%;
          }
          .ui-grid-b&gt;.ui-block-c {
              width: 60%;
          }
          #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;
          }
          &lt;/style&gt;
          &lt;/head&gt;
  
          &lt;body&gt;
  
  
          &lt;div data-role="page" id="login"&gt;
              &lt;div data-role="header" style="background-color:rgba(4, 165, 52, 0.86);"&gt;
                  &lt;h1 align="center"&gt;
                  Header
                  &lt;/h1&gt;
              &lt;/div&gt;
              &lt;div data-role="content" class="content"&gt;
                  &lt;div class="ui-grid-b"&gt;
                      &lt;div class="ui-block-a"&gt;
                      &lt;input type="text" value="Input"/&gt;
                      &lt;/div&gt;
  
                      &lt;div class="ui-block-b"&gt;
                      &lt;a href="#" class="ui-btn"&gt;&lt;/a&gt;
                      &lt;/div&gt;
  
  
                      &lt;div class="ui-block-c"&gt;
                          &lt;div id="myGroup" data-role="fieldcontain"&gt; 
                              &lt;fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"&gt; &lt;!-- strength --&gt;
                                  &lt;input type="radio" name="full" id="full" value="" /&gt;
                                  &lt;label  for="full" &gt;Full&lt;/label&gt;
  
                                  &lt;input type="radio" name="half" id="half" value="" /&gt;
                                  &lt;label for="radio-view-b" &gt;Half&lt;/label&gt;
  
                                  &lt;input type="radio" name="one" id="one" value=""  /&gt;
                                  &lt;label for="one" &gt;One&lt;/label&gt;
                                  &lt;/fieldset&gt;
                              &lt;/div&gt; 
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="footer" data-role="footer" data-position="fixed"&gt;
                  &lt;h1 align="center"&gt;&lt;i&gt;Footer&lt;/i&gt;&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>