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

Il semble que vous utilisiez Bootstrap. Je vous recommande donc d’adapter votre code de vue pour utiliser la disposition de forme horizontale décrite dans cette section des documents Bootstrap: http://getbootstrap.com/css/#forms

Selon le wiki bootstrap , il doit être

   Check me out  

qui dans Ruby on Rails est

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

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

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

La réponse correcte 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 avant l’élément label.

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

J’ai eu un problème similaire l’autre jour, en utilisant twitter bootsrap, mais j’utilise aussi la gem 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; } 

Pour conserver le i18n en utilisant une label , vous pouvez utiliser t :

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

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

pour les balises de base

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

Utilisez-vous le bootstrap ? Un moyen facile à faire est d’append :class => "span1" dans f.submit. Je suis sûr que ça a marché!

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’atsortingbut for sur l’étiquette. L’étiquette activera la case à cocher sans ce clic. Donc encore plus simple:

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

Généralement pour Rails, cela pourrait être un moyen d’y parvenir (nom_atsortingbut_humain fonctionne avec i18n):

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

Pour Bootstrap 4, dans 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://v4-alpha.getbootstrap.com/components/forms/#default-stacked

Option one is this and that—be sure to include why it's great

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

 
 
 <%= f.label :paid? %> 
 
 <%= f.check_box :paid, value: 'false' %> 
  

J’utilise css / html pur et ce css fonctionne bien pour moi.

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