How to keep a checkbox and label on the same line in a Rails form?

后端 未结 14 1437
天涯浪人
天涯浪人 2021-02-03 17:34

What should I do to keep the label of a checkbox on the same line with the checkbox in a rails view containing a form?

Currently the label goes on the next line:

<
相关标签:
14条回答
  • 2021-02-03 17:58

    i had a similar problem the other day, im using twitter bootsrap, but im also using the simple_form gem. i had to fix that detail through css, here is my code:

    <%=f.input :status, :label => "Disponible?",  :as => :boolean, :label_html => { :class => "pull-left dispo" }%>
    

    css:

    .dispo{
        margin-right:10%;
    }
    pull-left{
        float:left;
    }
    
    0 讨论(0)
  • 2021-02-03 18:00
     <br>
      <%= f.check_box :terms_of_service, :style => "float:left;" %>
      <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe, :style => "float:left;" %>
      <br>
    
    0 讨论(0)
  • 2021-02-03 18:01

    According to the bootstrap wiki, it must be

    <label class="checkbox">
      <input type="checkbox"> Check me out
    </label>
    

    which in Ruby on Rails is

    <%= f.label :terms_of_service do %>
      <%= f.check_box :terms_of_service %>
      I agree to the <%= link_to 'Terms of Service', policies_path %>.
    <% end %>
    
    0 讨论(0)
  • 2021-02-03 18:03

    for basic rails tags:

    <%= label_tag('retry-all') do %>
      Retry All
      <= check_box_tag("retry-all",false) %>
    <% end %>
    
    0 讨论(0)
  • 2021-02-03 18:03

    I use pure css/html and this css works good for me.

     input {
        float:left;
        width:auto;
    }
    label{
        display:inline;
    }
    
    0 讨论(0)
  • 2021-02-03 18:08

    The comment on the answer is correct, but it assumes some nuance of understanding about order of elements.

    The correct answer is as follows:

    <%= f.check_box :terms_of_service %>
    <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe
                                 , {class: "checkbox inline"} %>
    

    Two things are necessary:

    1. The class on the label element
    2. The checkbox element has to be before the label element.

    This is obvious once you see it working, but all the other samples for form_for always have the inputs after the labels and you need to change that up for checkbox.

    0 讨论(0)
提交回复
热议问题