botón de radio simple_form_for rails en línea

Question

Estoy intentando que mis botones se muestren en línea y también tienen 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 

Se está prestando 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 está funcionando correctamente, pero no estoy seguro de lo que va a trabajar.

Después de otra sugerencia que añade

.radio_buttons { display:inline; } 

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

Y tiene:

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

Sólo otra nota de que el valor por defecto todavía no está funcionando.

Answer 1

Si los quieres en línea , necesita dar a las etiquetas la clase en línea haciendo: :item_wrapper_class => 'inline'

Aquí hay un ejemplo con su 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 

EDIT: Me di cuenta de que mi respuesta fue más específica a simple_form + de arranque, ya que de arranque ya cuenta con estilos definidos al dar la etiqueta de la clase en línea. Sin embargo, deberías poder usar mi ejemplo, solo te costará un poco más crear tu CSS personalizado.

Answer 2

Puede intentar

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

No estoy tan seguro cuál es la gema se utiliza para la forma simple, pero esta es la fuente o una referencia sobre el que se puede tratar

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

Answer 3

La respuesta anterior podría no haber funcionado porque no estoy usando Bootstrap. Pero hay otras maneras. Le di una bofetada a div con class = "botones de radio" alrededor de los botones y etiqueto manualmente. Luego añade esto a mi hoja de estilos (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 en línea en todos los marcos, aunque esto es ajustado a buscar lo mejor para Fundación Zurb. ;)

Answer 4

Usando la forma simple con Bootstrap 3 puede usar la clase 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 

Answer 5

Una solución simple:

agregar una clase a la envoltura elemento. Esta clase puede ser lo que elijas.Estoy usando 'inline' en el siguiente ejemplo:

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

a continuación, definir un poco de CSS que sólo se aplica a grupos de botones de radio (y sólo los botones reales de radio, no la etiqueta del elemento):

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

He aquí un ejemplo de lo que esto se obtiene:

Answer 6

Sólo por alguien que el uso de bases ZURB con chekbox de forma sencilla vinieron aquí:

delgada vista:

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

SCSS:

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