css - simple_form_for rails botón de radio en línea

rails forms select

Question

Estoy intentando que mis botones se muestren en línea y también tengan un valor predeterminado porque no puede estar en blanco. Estoy usando plataformatex / simple_form y bootstrap.

= f.collection_radio_buttons :is_private, [[true, ''Private''], [false, ''Public'']], :first, :last, style: "display:inline", default: true

Está renderizando esto:

<span>
<input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
<label class="collection_radio_buttons" for="workout_is_private_true">Private</label>
</span>
<span>
<input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
<label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

Está claro que el style: no funciona correctamente, pero no estoy seguro de qué funcionará.

Siguiendo otra sugerencia he añadido

.radio_buttons { display:inline; }
= f.collection_radio_buttons :is_private, [[true, ''Private''], [false, ''Public'']], :first, :last, :item_wrapper_class => ''radio_buttons'', :default => true

Y consiguió:

<span class="radio_buttons">
<input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
<label class="collection_radio_buttons" for="workout_is_private_true">Private</label>
</span>
<span class="radio_buttons">
<input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
<label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

Solo otra nota de que el valor predeterminado todavía no funciona.

Answer 1

Una solución simple:

Agregue una clase al elemento contenedor . Esta clase puede ser lo que tu elijas. Estoy usando ''en línea'' en el siguiente ejemplo:

form.input :my_field, as: ''radio_buttons'' wrapper_html: {class: ''inline''}

Luego, defina algo de CSS que solo se aplique a los grupos de botones de radio (y solo a los botones de radio reales, no a la etiqueta del elemento):

input.radio_buttons.inline label.radio{
display: inline-block;
}

Aquí hay un ejemplo de lo que esto produce:

Answer 2

La respuesta anterior podría no haber funcionado porque no estoy usando Bootstrap. Pero hay otras maneras. Golpeé un div con class = "radio-buttons" alrededor de los botones y la etiqueta manualmente. Luego agregué esto a mi hoja de estilo (SASS):

.radio-buttons {
margin: .5em 0;
span input {
float: left;
margin-right: .25em;
margin-top: -.25em;
}
#this grabs the MAIN label only for my radio buttons
#since the data type for the table column is string--yours may be different
label.string {
margin-bottom: .5em !important;
}
clear: both;
}
.form-block {
clear: both;
margin-top: .5em;
}
.radio-buttons span {
clear: both;
display:block;
}

Esto hará que los botones de radio estén en línea en TODOS los marcos, aunque se ha modificado para que se vea mejor para la Fundación Zurb. ;)

Answer 3

Puedes probar

f.collection_radio_buttons :options, [[true, ''Yes''] ,[false, ''No'']], :first, :last ,:style =>"display:inline", :default => true

No estoy seguro de qué gema usas para la forma simple, pero esta es la fuente o una referencia en la que puedes probar

collection_radio_buttons(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)

Answer 4

Si desea que estén en línea, debe :item_wrapper_class => ''inline'' a las etiquetas la clase en línea haciendo lo siguiente :item_wrapper_class => ''inline''

Aquí hay un ejemplo usando tu código:

= f.input :is_private,
:collection => [[true, ''Private''], [false, ''Public'']],
:label_method => :last,
:value_method => :first,
:as => :radio_buttons,
:item_wrapper_class => ''inline'',
:checked => true

EDITAR: Me acabo de dar cuenta de que mi respuesta era más específica para simple_form + bootstrap, ya que bootstrap ya tiene estilos definidos cuando se le asigna a la etiqueta la clase en línea. Sin embargo, deberías poder usar mi ejemplo, solo necesitarás más trabajo para crear tu css personalizado.

Answer 5

Solo para alguien que usa zurb foundation con el simple chekbox de formulario vino aquí:

vista delgada:

= f.input :company_stages, as: :check_boxes, required: true

scss:

// simple-form checbox
.checkbox {
margin-right: 20px;
display: inline-block;
}

Answer 6

Usando Simple Form con Bootstrap 3 puede usar la clase de radio junto con las opciones item_wrapper_class y item_wrapper_tag .

= f.collection_radio_buttons :sort, [[foo,bar],[foo,bar],
:first, :last,
item_wrapper_class: :radio,
item_wrapper_tag: :div