15

Twitterブートストラップのインストールが機能しており、単純なフォームで次のように生成されます。

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

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

ここに画像の説明を入力

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

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

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

4

7 に答える 7

20

ここにはいくつかの問題があると思います。1つはフォーマットであり、simple_formが<div>入力フィールドの周囲に追加する方法です。@Ronの使用に関する提案はinput_field、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は通常、モデル名とフィールド名を操作することを想定しているように見えることです。上記の例では、ここで提案されているように、最初の引数としてaの:symbol代わりにを使用しています。ただし、それでもという名前の入力フィールドが生成されるため、コントローラーにその処理方法を指示する必要があります。@modelcontact[search]

この場合、simple_formを使用せず、代わりにRyanBatesのRailscast＃240、Search、Sort、PaginatewithAJAXの先頭近くにあるフォームのようなものを使用する方が簡単かもしれないと思います。

<%= 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
于 2012-05-16T22:05:32.300 に答える
14

inputsimple_form に渡しているため、サブフォームを作成しています。input_field代わりに使用してください。(ところで、これは simple_fields_for でも機能します)。

于 2012-04-30T23:02:30.073 に答える
2

マークの返信に追加：

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

ここで、オブジェクトでフォームを使用する場合、SimpleFormはFormBuilderです。つまり、オブジェクトまたはシンボルのいずれかの名前空間で機能するように作成されています。SimpleFormのsimple_form_for==Rails' form_for、操作するには常にオブジェクト名前空間が必要です。

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

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

于 2012-05-18T12:09:59.507 に答える
1

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

于 2012-04-23T20:50:46.733 に答える
0

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

<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>
于 2012-04-23T17:35:41.710 に答える
-3

この問題を抱えているすべての人は、流動的なレイアウトを使用せず、ドキュメントにHTML5Doctypeを指定していることを確認してください。

于 2012-06-12T08:09:31.213 に答える