2014-09-09 18 views
12

Ho un problema quando utilizzo simple_form e Bootstrap 3. Informazioni sul tag wrapper dell'input. Mostra i codici di seguito:Simple_form: come modificare la classe del wrapper di input? (Non l'effetto wrapper_html su)

codice della vista (con Haml)

= simple_form_for @refer_email_form, url: create_refer_message_path, html: { class: "form-horizontal" } do |f| 
    = f.input :to, label_html: { class: "col-sm-2" } 
    = f.input :subject, label_html: { class: "col-sm-2" } 

config/simple_form_bootstrap.rb

SimpleForm.setup do |config| 
    config.input_class = "form-control" 

    config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'error' do |b| 
    b.use :html5 
    b.use :placeholder 
    b.use :label, class: "control-label" 
    # b.wrapper tag: 'div', class: "col-sm-6" do |ba| 
    b.wrapper tag: 'div' do |ba| 
     ba.use :input 
     ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' } 
     ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } 
    end 
    end 

config.default_wrapper = :bootstrap 

voglio solo usare la "forma orizzontale" per impostazione predefinita

l'html generato

... 
\<div class="form-group string optional refer_email_form_to"> 
    <label class="string optional control-label col-sm-2" for="refer_email_form_to">To</label> 
    <div> 
    <input class="string optional form-control" id="refer_email_form_to" name="refer_email_form[to]" type="text"> 
    </div> 
</div> 
... 

Quello che voglio è quello di cambiare classe s' il <div> che ha appena avvolgere l'elemento <input>, qualcosa di simile:

... 
<div class="col-sm-6"> 
    <input class="string optional form-control" id="refer_email_form_to" name="refer_email_form[to]" type="text"> 
<div> 
... 

Ho letto il file README dalla pagina di GitHub di simple_form, e su Google per questo problema, so che posso ottenere questo aggiungendo b.wrapper tag: 'div', class: "col-sm-6" do |ba| al file config/simple_form_bootstrap.rb, ma il vero problema è che posso usare classi diverse per il div, forse col-sm-9 in altro modo. E ho cercato la input_html, wrapper_html nella vista, ma gli effetti sulla wrapper_html prima <div class="form-group">, e input_html solo gli effetti sul <input> elemento

C'è un modo per cambiare s' il <input> involucro <div> dinamicamente nella vista?

risposta

16

Change

b.wrapper tag: 'div' do |ba| 

a

b.wrapper :my_wrapper, tag: 'div' do |ba| 

Impostare il campo di input come segue

= f.input :to, label_html: { class: "col-sm-2" }, wrapper: :bootstrap, my_wrapper_html: { class: "css-class-name-goes-here" } 

Il codice HTML generato è

<div class="form-group string optional refer_email_form_to"> 
    <label class="string optional control-label col-sm-2" for="refer_email_form_to">To</label> 
    <div class="css-class-name-goes-here"> 
    <input class="string optional form-control" id="refer_email_form_to" name="refer_email_form[to]" type="text"> 
    </div> 
</div> 

Note

  1. devo specificare esplicitamente il “bootstrap” wrapper per farlo funzionare. La seguente impostazione non sembra avere effetto config.default_wrapper = :bootstrap
  2. Non funziona quando nomino il wrapper bootstrap come si fa. L'impostazione funziona quando uso un nome diverso come bootstrap_x. Questo potrebbe essere il mio problema locale quindi questo è solo per le tue informazioni nel caso in cui ti imbatti nello stesso problema.
  3. Se sei curioso da dove proviene tutto questo, controlla il file README simple_form, è nella sezione "The wrappers API".
+0

Grazie Hoa. Ho letto l'API ** dei wrapper **, penso che questo sia un modo per il problema, e ci proverò. – PeterZD