¿Cómo mantener una casilla de verificación y una etiqueta en la misma línea en un formulario de Rails?

Question

¿Qué debo hacer para mantener la etiqueta de una casilla de verificación en la misma línea con la casilla de verificación en una vista de carriles que contiene un formulario?

Actualmente la etiqueta va en la línea siguiente:

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

Gracias, Alexandra

Answer 1

Parece que estás usando Bootstrap, así que recomiendo adaptar su código de fin de utilice el diseño de formulario horizontal descrito en esta sección de los documentos de Bootstrap: http://getbootstrap.com/css/#forms

Answer 2

tuve una simil Un problema el otro día, estoy usando Twitter bootsrap, pero también estoy usando la gema simple_form. tuve que arreglar ese detalle a través de CSS, aquí está mi código:

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

css:

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

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

Answer 4

¿Utiliza bootstrap? La forma más fácil de hacerlo es agregar :class => "span1" en f.submit. ¡Estoy seguro de que funcionó!

Answer 5

De acuerdo con la bootstrap wiki, debe ser

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

que a Ruby on Rails es

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

Answer 6

El comentario sobre la respuesta es correcta, pero se supone algún matiz de comprensión sobre la orden de elementos.

La respuesta correcta es la siguiente:

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

son necesarias dos cosas:

1. La clase en el elemento de etiqueta
2. El elemento de casilla de verificación tiene que ser antes de que el elemento de etiqueta.

Esto es obvio una vez que lo veas funcionar, pero todas las demás muestras de form_for siempre tienen las entradas después de las etiquetas y debe cambiarlas para la casilla de verificación.

Answer 7

Para mantener la i18n usando de label, puede utilizar t:

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

Answer 8

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

Answer 9

utilizo puro css/html css y esto funciona bien para mí.

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

Answer 10

para las etiquetas de los carriles básicos:

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

Answer 11

me envuelva la casilla de verificación dentro de la etiqueta.

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

Cuando el campo de entrada está envuelto por su etiqueta, en realidad no necesita el atributo para en la etiqueta. La etiqueta activará la casilla de verificación sin hacer clic. Por lo tanto aún más simple:

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

Genéricamente de rieles, esto podría ser una manera de hacerlo (human_attribute_name trabaja con i18n):

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

Answer 12

Para 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 

o

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

https://v4-alpha.getbootstrap.com/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 primera forma es la forma más correcta, pero la segunda forma se ve prácticamente idénticos y secadora.