Как сохранить флажок и метку на одной строке в форме Rails?

Что делать, чтобы сохранить метку флажка в той же строке с флажком в виде рельсов, содержащем форму?

В настоящее время метка переходит на следующую строку:

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

Спасибо, Александра

Ответы

Ответ 1

Похоже, вы используете Bootstrap, поэтому я рекомендую адаптировать код представления для использования горизонтального макета формы, описанного в этом разделе документации по Bootstrap: https://getbootstrap.com/docs/4.3/components/forms/#horizont- форма

Ответ 2

Согласно начальной загрузке, это должно быть

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

который в Ruby on Rails есть

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

Ответ 3

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

Ответ 4

Комментарий к правилу, но он предполагает некоторый нюанс понимания порядка элементов.

Правильный ответ таков:

<%= 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"} %>

Необходимы две вещи:

Класс элемента label
Элемент флажка должен быть перед элементом метки.

Это очевидно, если вы видите, что он работает, но все остальные образцы для form_for всегда имеют входы после ярлыков, и вам нужно изменить это для флажка.

Ответ 5

У меня была аналогичная проблема на днях, я использовал twitter bootsrap, но im также использовал жемчуг simple_form. я должен был исправить эту деталь через css, вот мой код:

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

CSS

.dispo{
    margin-right:10%;
}
pull-left{
    float:left;
}

Ответ 6

Чтобы сохранить i18n с помощью label, вы можете использовать t:

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

Ответ 7

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

Ответ 8

для основных меток rails:

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

Ответ 9

Я бы обернул флажок внутри метки.

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

Когда поле ввода обернуто его меткой, на самом деле вам не нужен атрибут for. Этикетка активирует флажок без него при нажатии. Так что еще проще:

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

В общем случае для Rails это может быть способ обойти это (human_attribute_name работает с i18n):

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

Ответ 10

Используете ли вы bootstrap? Легкий способ сделать это добавить :class => "span1" в f.submit. Я уверен, что это сработало!

Ответ 11

Для Bootstrap 4, в HAML

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

или же

  .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—be sure to include why it great </label> </div>

Первый способ является более правильным, но второй выглядит практически идентично и DRYer.

Ответ 12

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

Ответ 13

На Rails 5.2, ruby 2.4 и начальной загрузке 4.1.1:

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

работал для меня без необходимости указывать встроенный флажок.

Ответ 14

Я использую чистый css/html, и этот css работает хорошо для меня.

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