2014-09-09 9 views
12

Mam problem podczas korzystania z simple_form i Bootstrap 3. O znaczniku opakowania wejściowego. Pokaż kody poniżej:Simple_form: jak zmienić klasę opakowania wejściowego (nie dotyczy efektu wrapper_html)

widok Kod (z 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 

Chcę tylko użyć "formę" Horizontal domyślnie

wygenerowany html

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

Co chcę to zmienić klasę <div> „s, która po prostu zawinąć element <input>, coś takiego:

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

Czytałem README strony github simple_form, a googled ten problem, wiem, że mogę to osiągnąć dodając b.wrapper tag: 'div', class: "col-sm-6" do |ba| do pliku config/simple_form_bootstrap.rb, ale prawdziwym problemem jest to, że mogę użyć innej klasy dla div, może col-sm-9 w innej postaci. I próbowałem input_html, wrapper_html w widoku, ale wrapper_html wpływ na pierwszym <div class="form-group"> i input_html tylko skutki na elemencie

<input> jest jakiś sposób aby zmienić <input> „s opakowanie <div> dynamicznie w widoku?

Odpowiedz

16

Zmień

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

do

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

Ustaw pole wprowadzania następująco

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

Wygenerowany HTML jest

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

Uwagi

  1. muszę jednoznacznie określić „Bootstrap” otoki, aby to działało. Poniższe ustawienie nie wydaje się działać config.default_wrapper = :bootstrap
  2. Nie działa, gdy nazwę opakowania bootstrap jak ty. Ustawienie działa, gdy używam innej nazwy, na przykład bootstrap_x. Może to być mój lokalny problem, więc to jest tylko dla twoich informacji, jeśli napotkasz na ten sam problem.
  3. Jeśli ciekawi Cię, skąd to wszystko pochodzi, sprawdź plik README simple_form, który znajduje się w sekcji "Wrapper API".
+0

Dzięki Hoa. Przeczytałem ** API wrapperów **, myślę, że to jest sposób na problem, i spróbuję tego. – PeterZD

Powiązane problemy