Home/ Questions/Q 7734995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T07:23:21+00:00

I’ve been looking for an existing answer to this question, but haven’t found one.

  • 0

I’ve been looking for an existing answer to this question, but haven’t found one. I am currently working on a Rails 3 project with some forms that have multiple choice/multiple selection questions with radio buttons and check boxes, respectively. I use the form builder style, like so:

<%= form_for [@profile,@answer], :method => 'put', :url => { :action => 'update' }  do |f| %>
            <% if @options.nil? %>
                <%= @error_message %>
            <% else %>
                <% @options.each do |option| %>
                    <label for="<%= 'answer_response_' + option.downcase.gsub(' ','_') %>"><%= f.radio_button :response, option %><%= option %></label>                     
                <% end %>
            <% end %>
            <div id="comments_area">
                <p>Do you have any additional comments?</p>
                <%= f.text_area :comments, :cols => 90, :rows => 5 %>
            </div>
            <%= submit_tag("Previous") %>
            <%= submit_tag("Next") %>               
        <% end %>

@options is just an array of strings denoting each option to be displayed.

The labels work perfectly, attached to their respective radio button/check box. However, the text for the label always seems to show up on the next line no matter what I do. Example:

Describe yourself:
[]
Short
[]
Fun
[]
Bored

I have already tried using the f.label form helper after the f.radio_button/check_box as well, and it has the same problem. In fact, this is why I am doing the label tag “HTML-style” above (not using the ERB). Is this a styling problem that can be solved with CSS? If so, how can I put the label text on the same line after the respective check box/radio button?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This could be a CSS issue, but more likely it’s because you placed radio button INSIDE the label, when it should be before or after.

    Try separating the two. If that doesn’t change the outcome, look into input width – if your inputs are set to cover the entire line, that would push the text into the next line. To change alignment, you can also look into the CSS keywords “inline”, “float” and possibly “vertical-align”. Getting the Web Developer extension for Firefox can also help you figure out what’s going on with the CSS, e. g. how much space an element is taking up.

    • 0