Having trouble resizing a control group using jQuery Mobile 1.3.0
Seeking the correct approach, currently attempting to resize the .ui-btn class with the following code:
#test_1 .ui-btn {
width: 200%;
}
The buttons are not resizing as expected; when enlarged, the right buttons overlap the left ones, and they do not reposition when made smaller.
Here is the HTML structure of the control group, which consists of 5 blocks - 4 columns and a Solo group in the middle:
<fieldset class="ui-grid-a" data-role="controlgroup" data-mini="true" id="test_1">
<div class="ui-block-a">
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
</div>
<div class="ui-block-b">
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
</div>
<div class="ui-grid-solo">
<label>AaaaaaaaaaaAaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
</div>
<div class="ui-block-a">
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
</div>
<div class="ui-block-b">
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
<label>Aaaaaaaaaaa
<input type="radio" name="accion" value="1">
</label>
</div>
</fieldset>
Full code available on jsFiddle: http://jsfiddle.net/4zMqn/1/
Your assistance is greatly appreciated!