Resize width of jQuery Mobile control group

Question

I'm having issues trying to figure out how to resize a control group in jQuery Mobile 1.3.0

I don't know the right approach, right now I'm resizing the .ui-btn class, like so:

#test_1 .ui-btn {
    width: 200%;
}

But it's not resizing the buttons as I expect, the right buttons overlap with the left buttons if I make them bigger or they do not reposition when I make them smaller.

This is my HTML, it's a control group with 5 blocks, 4 of them are columns and one is 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>

All the code in the jsFiddle I set: http://jsfiddle.net/4zMqn/1/

Thanks in advance!

Answer 1

Solution

To fix your problem use this css:

#test_1  { 
    width: 70% !important; 
}

Because fieldset already have defined width we need to override it with our value, and it can be done with !important.

Working jsFiddle example: http://jsfiddle.net/Gajotres/SuqRY/

More info

If you want to learn how to do this kind of changes by yourself you should check this article, it will teach you how to do this by yourself.

Answer 2

One way of doing it is to override the default css-style for the button size and add to your own CSS class

.ui-mini .ui-btn-inner {
   // resize code
 }