Изменить ширину контрольной группы jQuery Mobile

Question

У меня возникают проблемы при попытке выяснить, как изменить размер контрольной группы в jQuery Mobile 1.3.0

Я не знаю правильного подхода, сейчас я изменяю размер класса.ui-btn, вот так:

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

Но это не изменение размера кнопок, как я ожидаю, правые кнопки перекрываются с левыми кнопками, если я делаю их больше или они не меняют положение, когда я делаю их меньше.

Это мой HTML, это контрольная группа с 5 блоками, 4 из них - столбцы, а один - группа Соло посередине:

<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>

Весь код в jsFiddle я установил: http://jsfiddle.net/4zMqn/1/

Заранее спасибо!

Answer 1

Решение

Чтобы исправить вашу проблему, используйте эту CSS:

#test_1  { 
    width: 70% !important; 
}

Поскольку fieldset уже имеет определенную ширину, нам нужно переопределить его нашим значением, и это можно сделать с помощью ! Important.

Рабочий пример jsFiddle: http://jsfiddle.net/Gajotres/SuqRY/

Больше информации

Если вы хотите научиться самостоятельно выполнять подобные изменения, ознакомьтесь с этой статьей, в которой вы узнаете, как это сделать самостоятельно.

Answer 2

Один из способов сделать это - переопределить стиль css по умолчанию для размера кнопки и добавить в свой собственный класс CSS.

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