CODEWITHSUNDEEP
ruby-on-railsformstwitter-bootstrapruby-on-rails-3
AndraD
AndraD

Reputation: 2850

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

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:

<div class="span6 offset3">
<%= form_for(@user) do |f| %>
<%= render 'shared/error_messages', object: f.object %>

  <%= f.label :name %>
  <%= f.text_field :name %>

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

  <%= f.submit "Create my account", :class => "btn btn-large btn-primary" %>
<% end %>

Thank you, Alexandra

Upvotes: 51

Views: 84339

Answers (15)

William Hu
William Hu

Reputation: 16149

I use pure CSS/HTML and this CSS works well for me.

input {
    float: left;
    width: auto;
}
label {
    display: inline;
}

Upvotes: -2

Enow B. Mbi
Enow B. Mbi

Reputation: 319

This one works for me -I use flex

CSS file

.checkbox-container-outer{
  display: flex;
  justify-content: left;
}

.checkbox-container-inner{
  margin-right: 10px;
  margin-top: 5px;
}

RAILS VIEW

<div class="checkbox-container-outer">
 <div class="checkbox-container-inner">
   <%= form.checkbox_field :remember_me
 </div>
 <div>
   <%= form.label :remember_me
 </div>
</div>

How it looks on my site

Upvotes: 0

tomb
tomb

Reputation: 1436

On Rails 5.2, ruby 2.4 and bootstrap 4.1.1:

<%= form.check_box :terms_of_service, label: "your custom label...."%>

worked for me without having to indicate inline checkbox.

Upvotes: 0

Chloe
Chloe

Reputation: 26264

For Bootstrap 4, in HAML

  .form-check
    =f.label :decision_maker, class: 'form-check-label' do
      =f.check_box :decision_maker, class: 'form-check-input'
      Decision Maker

or

  .form-group
    =f.check_box :decision_maker
    =f.label :decision_maker

https://getbootstrap.com/docs/4.3/components/forms/#default-stacked

<div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> Option one is this and that&mdash;be sure to include why it's great </label> </div>

The first way is the more correct way, but the second way looks virtually identical and DRYer.

Upvotes: 0

Beno&#238;t Legat
Beno&#238;t Legat

Reputation: 968

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

Upvotes: 65

David Underwood
David Underwood

Reputation: 4966

It looks like you're using Bootstrap, so I recommend adapting your view code to use the horizontal form layout described in this section of the Bootstrap docs: https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form

Upvotes: 24

Jim
Jim

Reputation: 1

<div class="row"> 
  <div class="col-sm-1">
    <%= f.label :paid? %>
  </div>
  <div class="col-sm-1">
    <%= f.check_box :paid, value: 'false'  %>
  </div>
</div>

Upvotes: 0

JSpang
JSpang

Reputation: 186

I would wrap the check box inside the label.

  <%= f.label :terms_of_service do %>
    <%= f.check_box :terms_of_service %>
    I agree to the <%= link_to 'Terms of Service', policies_path %>
  <% end %>

When the input field is wrapped by it's label, you actually don't need the for attribute on the label. The label will activate the check box without it on click. So even simpler:

  <label>
    <%= f.check_box :terms_of_service %>
    I agree to the <%= link_to 'Terms of Service', policies_path %>
  </label>

Generically for Rails, this could be a way to go about it (human_attribute_name works with i18n):

<label>
  <%= f.check_box :terms_of_service %>
  <%= User.human_attribute_name(:terms_of_service) %>
</label>

Upvotes: 2

Blair Anderson
Blair Anderson

Reputation: 20171

for basic rails tags:

<%= label_tag('retry-all') do %>
  Retry All
  <= check_box_tag("retry-all",false) %>
<% end %>

Upvotes: 1

Still Learning
Still Learning

Reputation: 39

  <div class="form-inline">
    <%= f.check_box :subscribed, class: 'form-control' %>
    <%= f.label :subscribed, "Subscribe" %>
  </div>

Upvotes: 3

Sidhannowe
Sidhannowe

Reputation: 475

To keep the i18n using of label, you can use t:

<%= f.label :my_field do %>
  <%= f.check_box :my_field %> <%= t 'activerecord.attributes.my_model.my_field' %>
<% end %>

Upvotes: 3

Patrick
Patrick

Reputation: 2247

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.

Upvotes: 5

duykhoa
duykhoa

Reputation: 2302

Do you use bootstrap? Easy way to do is add :class => "span1" in f.submit. I'm sure it worked!

Upvotes: 0

Vikram Jain
Vikram Jain

Reputation: 5588

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

Upvotes: 5

Rodrigo Zurek
Rodrigo Zurek

Reputation: 4575

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

Upvotes: 2

Related Questions