ホーム>source

私は作業中のTwitterブートストラップをインストールしていて、シンプルなフォームは以下を生成します:

<前>ウィズウィズ

どういうわけか「検索!」ボタンは検索ボックスと同じ行に表示されません。何か案は?

ありがとう!

更新:

申し訳ありませんが、すべてのマークアップは以下に基づいてsimple_formによって生成されることを述べたはずです。

<前>ウィズウィズ

したがって、実際には、simple_formなどのブートストラップインストールを実行したにもかかわらず、生成されたマークアップに問題があるようです。

上の画像は、ストレートHTMLフォームを示しています

<前>ウィズウィズ

... simple_formによって生成されたものの上。

<form accept-charset="UTF-8" action="/find_map" class="simple_form form-inline" id="new_location" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="p5CSoidWaoGMfHY0/3ElWi0XJVg6Cqi9GqWRNlJLBQg=" /></div> <div class="control-group string required"><div class="controls"><input class="string required" id="location_address" name="location[address]" placeholder="Address" size="50" type="text" /></div></div><input class="btn" name="commit" type="submit" value="Find!" /> </form>
あなたの答え
  • 解決した方法 # 1

    ここにはいくつか問題があると思います。 1つはフォーマットで、simple_formが <div> を追加する方法です。  入力フィールドの周り。 @Ronの input_field の使用に関する提案  simple_form 2.0.1で動作します。私の例では、Contactsテーブルで名前を検索しています。以下は、テキストボックスとボタンを並べて表示します。

    <前>ウィズウィズ

    もう1つの問題は、simple_formが通常、モデル名とフィールド名を操作することを想定しているように見えることです。上記の例では <%= simple_form_for :contact, :method => 'get', :html => { :class => 'form-search' } do |f| %> <%= f.input_field :search, :placeholder => "Name", :class => "input-medium search-query" %> <%= f.submit "Find!", :class => "btn" %> <% end %> を使用しています   :symbol の代わりに  ここで提案されている最初の引数として。しかし、それでも @model という名前の入力フィールドが生成されます  そのため、コントローラーにその処理方法を通知する必要があります。

    この場合、より簡単になると思いますない simple_formを使用し、代わりにRyan BatesのRailscast#240の冒頭付近のフォームのようなものを使用して、検索、ソート、AJAXによるページ付けを行います。

    <前>ウィズウィズ

    これでフィールドの名前は「検索」になり、コントローラの#indexメソッドで次のように使用できます。

    <前>ウィズウィズ

    私のモデルにこれがあると仮定します:

    <前>ウィズウィズ

  • 解決した方法 # 2

    contact[search] を渡すため、サブフォームを作成しています  simple_formに。 <%= form_tag contacts_path, :method => 'get', :class => "form-search" do %> <%= text_field_tag :search, nil, :placeholder => "Name", :class => "input-medium search-query" %> <%= submit_tag "Find!", :name => nil, :class => "btn" %> <% end %> を使用する  代わりに。 (ところで、これはsimple_fields_forでも機能します)。

  • 解決した方法 # 3

    @contacts = @contacts.search(params[:search]) をカスタマイズする必要があります  そして def self.search(search) if search where('lower(name) LIKE ?', "%#{search.downcase}%") else scoped end end   input として表示するdivクラス  彼らが input_field の下にいるとき  形:

    ウィズウィズ
    

  • 解決した方法 # 4

    マークの返信に追加:

    だから、 control-group  を作成するために存在します入力 コンポーネントのみで、ラベル/エラー/ラッパーのようなものはありません。つまり、フィールドをラッピングしたりタグを取得したりすることはありません。必要に応じて手動で行う必要があります。

    オブジェクトでフォームを使用することについて、SimpleFormはFormBuilderです。つまり、オブジェクトまたはシンボルのいずれかの名前空間を操作するために作成されました。 SimpleFormの controls  == Railsの inline-block 、 君は常に 処理するオブジェクトの名前空間が必要です。

    検索フォームのような単純なケースでは、 form-inline などの単純なフォームヘルパーを使用するほうがよいでしょう。 、あなたが指摘したように。 form.form-inline div.control-group { display: inline-block; } form.form-inline div.control-group div.controls { display: inline-block; } に依存する必要はありません  または input_field  そのため、私は同意し、通常はその道を進みます。

    それがお役に立てば幸いです。それでも疑問がある場合はお知らせください。

  • 解決した方法 # 5

    :html =>を変更します  {:class => 'form-inline'} to:html => {:class => 'フォーム水平'}

    simple_form_for

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ javascript - Nodejsでサードパーティのトラフィックを監視する最良の方法は何ですか?