2012-05-15 72 views
3

我有一堆我想要水平渲染的部分,使用form-inline(twitter bootstrap)。如果單獨指定,它們可以正常工作,但如果使用:defaults指定,則不會顯示該類。rails 3 simple_form_for:默認

%ul.nav.nav-tabs#tab 
    %li= link_to "General", "#client_tab1", 'data-toggle'=>"tab" 
    %li= link_to "Applications", "#client_tab2", 'data-toggle'=>"tab" 
= simple_form_for @client, defaults:{input_html:{class:'form-inline'}}, :html=>{:class=>"client tab-content"} do |f| 
    #client_tab1.tab-pane.fade.in.active 
    = render :partial => "client", :locals => {:f => f} 
    #client_tab2.tab-pane.fade.in 
    = render :partial => "applications/applications", :locals => {:f => f} 
    .actions 
    = f.button :submit, class:"btn-primary", value: "Save" 

和部分看起來像:

.status 
    .span3 
    = f.label :status 
    = f.collection_select :status_id, selection_list(Status), :last, :first 
    %br 
    = f.input :open_date, :as => :jdate 
    %br 
    = f.label :assigned_to 
    = f.collection_select :assigned_to_id, selection_list(User), :last, :first 
    %br 
    .form-inline 
     = f.label :assistant 
     = f.collection_select :assistant_id, selection_list(User), :last, :first 
    %br 

在上面的,有明確.FORM內聯,如預期的所有作品。但根據https://github.com/plataformatec/simple_form下面的示例代碼,在:defaults中定義的類應該應用於所有方法。事實上,他們不是。

<%= simple_form_for @user, :defaults => { :input_html => { :class => 'default_class' } } do |f| %> 
    <%= f.input :username, :input_html => { :class => 'special' } %> 
    <%= f.input :password, :input_html => { :maxlength => 20 } %> 
    <%= f.input :remember_me, :input_html => { :value => '1' } %> 
    <%= f.button :submit %> 
<% end %> 

任何人都可以解釋爲什麼這可能是或我做錯了什麼?

回答

1

幾件事情:

  1. 從閱讀Twitter的引導文件,它看起來像當應用到父元素輸入欄,表格內聯類的工作,如表單元素,或者在你的榜樣,一個div。

您可以看到,這裏(從樣式表取):

.form-search input, 
.form-inline input, 
.form-horizontal input, 
.form-search textarea, 
.form-inline textarea, 
.form-horizontal textarea, 
.form-search select, 
.form-inline select, 
.form-horizontal select, 
.form-search .help-inline, 
.form-inline .help-inline, 
.form-horizontal .help-inline, 
.form-search .uneditable-input, 
.form-inline .uneditable-input, 
.form-horizontal .uneditable-input, 
.form-search .input-prepend, 
.form-inline .input-prepend, 
.form-horizontal .input-prepend, 
.form-search .input-append, 
.form-inline .input-append, 
.form-horizontal .input-append { 
    display: inline-block; 
    *display: inline; 
    margin-bottom: 0; 
    *zoom: 1; 
} 
  1. 我讀了simple_form文檔,意味着默認值將只適用於f.input方法。我認爲這意味着這意味着input_html提供的內容將應用於f.input生成的所有元素,包括標籤和輸入字段本身。但是,它看起來不像f.input生成任何父元素到輸入字段,就像一個div。

因此,自當有一個父元素,像一個div,它的類形內聯Twitter的引導只適用的風格,它不會,如果表格內聯應用到輸入字段關係。

它似乎沒有增加太多,只保留.form-inline部分內容,爲什麼不把它保留在那裏?

+0

非常有趣。我不希望它在部分中的原因是能夠垂直或水平使用相同的部分,儘管這可以通過傳遞開關來輕鬆完成。 您對文檔的閱讀很有意義 - 直接在輸入和控件標籤div中添加表單可能不起作用。然而,事實上,:defaults哈希不會放在那裏! 我對這種行爲有點好奇,但你的回答很好。謝謝。 –