web-dev-qa-db-fra.com

bouton radio simple_form_for Rails en ligne

J'essaie d'afficher mes boutons en ligne et d'avoir une valeur par défaut, car ils ne peuvent pas être vides. J'utiliseplataformatex/simple_form et bootstrap.

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

C'est rendre ceci:

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

Il est clair que le style: ne fonctionne pas correctement mais je ne suis pas sûr de ce qui fonctionnera.

Suite à une autre suggestion, j'ai ajouté 

.radio_buttons { display:inline; }

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

Et j'ai:

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

Juste une autre note que la valeur par défaut ne fonctionne toujours pas.

cssruby-on-railsformstwitter-bootstrapsimple-form
22
trev9065

Si vous voulez les insérer en ligne, vous devez donner aux étiquettes la classe en-ligne en faisant ceci: :item_wrapper_class => 'inline'

Voici un exemple utilisant votre code:

= 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: Je viens de me rendre compte que ma réponse était plus spécifique à simple_form + bootstrap, car bootstrap a déjà des styles définis lors de l'attribution de la classe inline à l'étiquette. Vous devriez être capable d’utiliser mon exemple, il vous faudra travailler davantage pour créer votre css personnalisé.

53
flynfish

Tu peux essayer 

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

Vous ne savez pas trop quelle gemme vous utilisez pour un formulaire simple, mais ceci est la source ou une référence sur laquelle vous pouvez essayer

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

En utilisant Simple Form avec Bootstrap 3, vous pouvez utiliser la classe radio avec les options item_wrapper_class et item_wrapper_tag.

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

La réponse ci-dessus n'a peut-être pas fonctionné car je n'utilise pas Bootstrap. Mais il y a d'autres moyens. J'ai giflé un div avec class = "radio-buttons" autour des boutons et étiqueter manuellement. Ensuite, j'ai ajouté ceci à ma feuille de style (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;
 }

Cela rendra les boutons radio en ligne sur TOUS les frameworks, bien que cela ait été modifié pour donner le meilleur à la Fondation Zurb. ;)

1
Jenny Lang

Une solution simple:

Ajouter une classe à l'emballage de l'élément . Cette classe peut être celle que vous choisissiez. J'utilise 'inline' dans l'exemple ci-dessous: 

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

Ensuite, définissez des CSS qui ne s'appliquent qu'aux groupes de boutons radio (et uniquement aux boutons radio actuels, pas à l'étiquette de l'article): 

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

Voici un exemple de ce que cela donne:

The above yields this result

0
Ben

Juste pour quelqu'un qui utilise zurb foundation avec une simple case à cocher est venu ici:

vue mince:

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

scss:

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