web-dev-qa-db-ja.com

Simple_form bootstrapスタイルインラインフォームが正しく機能していません

私は動作しているTwitter bootstrapインストールを持っており、単純なフォームは以下を生成します：

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

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

ありがとう！

更新：

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

<%= simple_form_for @location, :url => find_map_path, :html => { :class => 'form-inline' } do |f| %>

        <%= f.input :address, :label => false, :placeholder => "Address" %>
        <%= f.submit "Find!", :class => 'btn' %>

<% end %>

したがって、実際には、bootstrap install for simple_formなどを実行したにもかかわらず、生成されたマークアップに問題があるようです。

enter image description here

上の画像はまっすぐなhtmlフォームを示しています

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <button type="submit" class="btn">Sign in</button>
</form>

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

ruby-on-railstwitter-bootstrapsimple-form
15
Abram

ここにはいくつかの問題があると思います。 1つはフォーマットであり、simple_formが入力フィールドの周りに<div>を追加する方法です。 input_fieldを使用するという@Ronの提案は、simple_form2.0.1で機能します。私の例は、連絡先テーブルで名前を検索することです。次のようにすると、テキストボックスとボタンが並べて表示されます。

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

もう1つの問題は、simple_formは通常、モデル名とフィールド名を操作することを想定しているように見えることです。上記の例では、提案されているように、最初の引数として:symbolの代わりに@modelを使用しています ここ 。ただし、それでもcontact[search]という名前の入力フィールドが生成されるため、コントローラーにその処理方法を指示する必要があります。

この場合、simple_formを使用せずにnot、代わりにRyan Batesの先頭近くのフォームのようなものを使用する方が簡単かもしれないと思います ' Railscast ＃240、検索、並べ替え、AJAXによるページ付け ：

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

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

@contacts = @contacts.search(params[:search])

モデルにこれがあると仮定します。

def self.search(search)
  if search
    where('lower(name) LIKE ?', "%#{search.downcase}%")
  else
    scoped
  end
end
20
Mark Berry

Simple_formにinputを渡すため、サブフォームが作成されます。使用する input_field代わりに。 （ところで、これはsimple_fields_forでも機能します）。

14
Ron

control-groupおよびcontrols divクラスをカスタマイズして、inline-blockフォームの下にあるときにform-inlineとして表示する必要があります。

form.form-inline div.control-group { display: inline-block; }
form.form-inline div.control-group div.controls { display: inline-block; }
5
GuiGS

マークの返信に追加：

したがって、input_fieldはinputコンポーネントのみを作成するために存在し、ラベル/エラー/ラッパーを提供しません。つまり、フィールドをラップするタグが表示されないことを意味します。必要に応じて、手動で行う必要があります。

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

検索フォームのような単純なケースでは、指摘したように、form_tagなどの単純なフォームヘルパーを使用することをお勧めします。そのためにsimple_form_forまたはform_forに依存する必要はありません。私は同意し、通常はその道を進みます。

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

2
Carlos Antonio

：html => {：class => 'form-inline'}を：html => {：class => 'form-horizo​​ntal'}に変更します

1
Lauro Caetano

入力アドレスの横にある入力ボタンを動かせませんか？私はそれが問題を解決すると思います

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

        <!-- move the button to here -->
        <input class="btn" name="commit" type="submit" value="Find!" />
    </div>
      </div>

</form>
0
William Calvin