Question

In a rails 3.0 app that uses jquery mobile for mobile devices I have a series of radio buttons with responses 0 through 2.

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

These radio buttons are way too small to see well, and use, on a mobile touch screen. I tried enclosing them in the tags for jquery mobile like so:

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

They still come out small. I could use html instead of rails to produce the buttons, but I’d rather not. Is there an option to increase the size of the rails produced radio buttons? Is there a way to manipulate the rails code to produce the html that will result in jquery mobile format? Is there another possibility i haven’t thought of?

Thanks.

BTW, there is this question but it has no answer and it hasn’t been updated since Nov ’11.

Answer 1

Style your radio buttons with CSS:

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