web-dev-qa-db-fra.com

Comment garder une case à cocher et une étiquette sur la même ligne dans un formulaire Rails?

Que dois-je faire pour conserver l'étiquette d'une case à cocher sur la même ligne que la case à cocher dans une vue Rails contenant un formulaire?

Actuellement, l'étiquette passe à la ligne suivante:

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

Merci, Alexandra

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

Il semble que vous utilisiez Bootstrap, je vous recommande donc d'adapter votre code de vue pour utiliser la disposition de formulaire horizontale décrite dans cette section des documents Bootstrap: https: // getbootstrap. com/docs/4.3/components/forms/# horizontal-form

22
David Underwood

Selon le bootstrap wiki , il doit être

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

qui en 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 %>
58
Benoît Legat
 <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>
5
jainvikram444

Le commentaire sur la réponse est correct, mais il suppose une certaine nuance de compréhension sur l'ordre des éléments.

La bonne réponse est la suivante:

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

Deux choses sont nécessaires:

  1. La classe sur l'élément label
  2. L'élément checkbox doit être placé avant l'élément label.

C'est évident une fois que vous le voyez fonctionner, mais tous les autres exemples pour form_for ont toujours les entrées après les étiquettes et vous devez changer cela pour la case à cocher.

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

Pour conserver l'i18n à l'aide de label, vous pouvez utiliser t:

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

j'ai eu un problème similaire l'autre jour, j'utilise Twitter bootsrap, mais j'utilise également la gemme simple_form. j'ai dû corriger ce détail via css, voici mon code:

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

css:

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

pour les balises de base Rails:

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

J'emballerais la case à cocher à l'intérieur de l'étiquette.

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

Lorsque le champ de saisie est enveloppé par son étiquette, vous n'avez en fait pas besoin de l'attribut for sur l'étiquette. L'étiquette activera la case à cocher sans qu'elle clique. Alors encore plus simple:

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

De manière générique pour Rails, cela pourrait être une façon de procéder (human_attribute_name fonctionne avec i18n):

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

Pour Bootstrap 4, en HAML

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

ou

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

La première façon est la manière la plus correcte, mais la seconde semble pratiquement identique et sèche.

0
Chloe

On Rails 5.2, Ruby 2.4 et bootstrap 4.1.1:

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

travaillé pour moi sans avoir à cocher la case en ligne.

0
tomb

Utilisez-vous bootstrap? Un moyen simple consiste à ajouter :class => "span1" dans f. soumettre. Je suis sûr que ça a marché!

0
duykhoa
<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>
0
Jim