Размер сгенерированных радиокнопками рельсов в мобильном приложении, использующем jquery mobile

Question

В приложении rails 3.0, которое использует jquery mobile для мобильных устройств, у меня есть несколько переключателей с ответами от 0 до 2.

<%= f.radio_button :field_name, 2 %>
<%= f.radio_button :field_name, 1 %>
<%= f.radio_button :field_name, 0 %>

Эти радиокнопки слишком малы, чтобы хорошо видеть и использовать на мобильном сенсорном экране. Я попытался заключить их в теги для jquery mobile следующим образом:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Enjoy</legend>
        <%= f.radio_button :field_name, 2 %>
        <%= f.label :field_name, "blah" %>
        <%= f.radio_button :field_name, 1 %>
        <%= f.label :field_name, "blah" %>
        <%= f.radio_button :field_name, 0 %>
        <%= f.label :field_name, "blah" %>
    </fieldset>
</div>

Они все еще маленькие. Я мог бы использовать html вместо рельсов для производства кнопок, но я бы не хотел. Есть ли опция увеличения размера направляющих, выпускаемых радиокнопками? Есть ли способ манипулировать кодом рельсов для создания HTML, который приведет к мобильному формату jquery? Есть ли еще одна возможность, о которой я не подумал?

Спасибо.

Кстати, есть этот вопрос, но он не имеет ответа и не обновлялся с ноября '11.

Answer 1

В качестве альтернативы, вы можете просто использовать html «label for», чтобы получить сгруппированную кнопку jQuery Mobile «look» (дополнительный CSS не требуется).Просто просмотрите источник сгенерированных переключателей и сопоставьте метку с идентификатором кнопки:

    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
      <legend>Enjoy</legend>

          <%= f.radio_button :field_name, 0 %>
          <label for="field_name_0">Zero</label>

         <%= f.radio_button :field_name, 1 %>
         <label for="field_name_1">One</label>

          <%= f.radio_button :field_name, 2 %>
          <label for="field_name_2">Two</label>
       </fieldset>
</div>

Answer 2

Стиль ваших кнопок радио с CSS:

.radio_buttons_class {
    height:6em;
    width:6em;
}