3

form-inline (twitter ブートストラップ) を使用して、水平方向にレンダリングしたいパーシャルがたくさんあります。個別に指定した場合は正常に動作しますが、:defaults を使用して指定した場合、クラスは表示されません。

%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-inline を使用すると、すべてが期待どおりに機能します。ただし、 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 %>

これがなぜなのか、または私が間違っていることを誰かが説明できますか?

4

1 に答える 1

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. デフォルトが f.input メソッドにのみ適用されることを意味するように、simple_form のドキュメントを読みました。これは、input_html に提供されたものが、ラベルと入力フィールド自体を含む、f.input によって生成されたすべての要素に適用されることを意味すると思います。ただし、f.input が div のような入力フィールドに親要素を生成するようには見えません。

したがって、twitter ブートストラップは、クラスが form-inline である div などの親要素がある場合にのみスタイルを適用するため、form-inline が入力フィールドに適用されても問題ありません。

部分的に .form-inline を保持するだけではあまり追加されないように思えますが、そこに保持しないのはなぜですか?

于 2012-05-15T22:14:59.490 に答える