simple_form Formular-Elemente erscheinen in einer Zeile ohne Zeilenumbruch?

Wäre es möglich, schreiben Sie ein wrapper oder Stil simple_form, so dass die Formular-Elemente sind nebeneinander auf einer Zeile?

Was benötigt wird, ist wie folgt:

Suche nach: [ Eingabefeld ] Land [ drop-down-textfield ] Stadt [ drop-down-textfield ]

Im mit

  • simple_form 2
  • twitter bootstrap 2

Sie derzeit gesetzt .form-horizontal oder .form-vertikale, wäre der beste Weg, um eine "inline 1 Zeile Formular-Elemente anzeigen", indem Sie Regeln hinzufügen, um CSS oder erstellen Sie eine simple_form wrapper?

Update einige 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" }

Mit den normalen bootstrap-css nichts mehr noch.
die item_wrapper_class funktioniert nicht für ein ganzes element nur für wie ein einziger radio-button in einer Sammlung.

Ich brauche einen guten Weg, um wickeln Sie die komplette Sammlung inline-Elemente ( Alter und Alter aus )

InformationsquelleAutor Rubytastic | 2012-03-28
  1. 0

    Können Sie entweder .form-horizontal (für mich die einfachste und saubere Lösung) oder schreiben Sie eine benutzerdefinierte Eingabe-oder benutzerdefiniertes Formular-Builder. Überprüfen Sie die Dokumentation auf https://github.com/plataformatec/simple_form.

    • .form-horizontal-ich habe versucht, aber es beginnt ein Zeilenumbruch nach jeder Eingabe in ein Formular-Feld. Ich check das schreiben ein benutzerdefiniertes Formular-builder als thx
    • oder Sie cn verwenden display:inline oder display:inline-block für ein-und Etiketten unter bestimmten Formular-id-Selektor. so etwas wie #my_form input { display: inline-block }
    • Sollten Sie verwenden .form-inline.
    • Vermeiden Sie die Anwendung von css direkt auf die Eingänge, wenn du kannst. Verwenden Sie die Rahmenbedingungen, die Sie bereits umgesetzt haben.
    InformationsquelleAutor Nicolas Garnil
  2. 1

    Kann ich nicht fügen Sie einen Kommentar an die person über, weil ich nicht den Ruf, aber nur ran an den Eingängen durch die Angabe der Klasse, des Levels oben, dann verwenden Sie ein mixin, das Sie haben, geben form-control-Stile zu machen, da es die gleiche form-control:

    .form-group input {
  @include form-control-styling
}
    InformationsquelleAutor Jenny Lang
  3. 0

    Die neueste version von bootstrap hat eine form-inline-Klasse. 

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

    Können Sie auch benutzerdefinierte Wrapper. Dies ist das markup von bootstrap, Dokumentation:

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

    So, wenn Sie erstellt eine benutzerdefinierte wrapper (so etwas wie):

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

    Sollte dies tun die meisten was Sie brauchen. Der Teil, den ich noch nicht so geklappt hat, wie 'form-control' - Klasse zu den Eingängen.

    InformationsquelleAutor Rimian
Schreibe einen Kommentar