simple_form faire apparaître des éléments de formulaire dans une ligne sans nouvelle ligne ?

Question

Serait-il possible d'écrire un wrapper ou un style simple_form pour que les éléments du formulaire soient à côté les uns des autres sur une seule ligne ?

Voici ce qu'il faut faire :

recherche : [ input text field ] country [ drop down textfield ] city [ drop down textfield ]

J'utilise

• simple_form 2
• twitter bootstrap 2

Vous pouvez actuellement définir .form-horizontal ou .form-vertical, la meilleure façon d'obtenir un "affichage des éléments de formulaire en ligne sur une ligne" serait-elle d'ajouter des règles au CSS ou de créer un wrapper simple_form ?

Mise à jour de certains haml/css :

= simple_form_for(@session, :html => { :class => 'form-horizontal' }) do |f|

  = f.input :age_from,
            :collection => 18..60,
            :default => 18,
            :blank =>false,
            :label => 'Age from',
            :item_wrapper_class => 'inline',
            :input_html => { :style => "width: 102px" },

  = f.input :age_to,
            :collection => 18..60,
            :default => 25,
            :blank => false,
            :label => 'Age to',
            :item_wrapper_class => 'inline',
            :input_html => { :style => "width: 102px" }

J'utilise le css bootstrap habituel, rien de plus pour l'instant. L'item_wrapper_class ne fonctionne pas pour un élément entier, juste pour un bouton radio dans une collection.

J'ai besoin d'un bon moyen d'envelopper les éléments de la collection complète en ligne ( age to et age from ).

Answer 1

Je ne peux pas ajouter un commentaire à la personne au-dessus parce que je n'ai pas la réputation, mais il suffit de saisir les entrées en spécifiant la classe du niveau au-dessus, puis d'utiliser un mixin que vous avez donné aux styles de form-control pour le rendre identique à form-control :

.form-group input {
  @include form-control-styling
}

Answer 2

Vous pouvez soit utiliser .form-horizontal (pour moi la solution la plus simple et la plus propre), soit écrire une entrée personnalisée ou des constructeurs de formulaires personnalisés. Consultez la documentation à https://github.com/plataformatec/simple_form .

Answer 3

La dernière version de bootstrap dispose d'une classe "form-inline".

= simple_form_for(@session, :html => { :class => 'form-inline' }) do |f|

Vous pouvez également créer des wrappers personnalisés. Voici le balisage de la documentation de bootstrap :

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  ...
</form>

Ainsi, si vous avez créé un wrapper personnalisé (quelque chose comme) :

SimpleForm.setup do |config|
  config.wrappers :bootstrap, :tag => 'div', :class => 'form-group' do |b|
    b.use :label
    b.use :input
  end
end

Cela devrait permettre de répondre à la plupart de vos besoins. La partie que je n'ai pas encore résolue est la façon d'ajouter la classe "form-control" aux entrées.