Simple_form引导样式内联形式无法正常工作

Question

我有一个工作的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 %>

所以，实际上，生成的标记似乎存在问题，即使我已经为simple_form运行了bootstrap安装等。

上图显示了直接的HTML格式

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

...高于simple_form生成的那个。

Answer 1

我认为这里有几个问题。一种是格式化，以及simple_form在输入字段周围添加<div>的方式。 @ Ron的使用input_field的建议适用于simple_form 2.0.1。我的例子是在Contacts表中搜索名称。以下内容使文本框和按钮并排显示：

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

另一个问题是，似乎simple_form通常假设您希望使用模型和字段名称。上面的示例使用:symbol而不是@model作为建议here的第一个参数。但是仍然会生成一个名为contact[search]的输入字段，因此您必须告诉控制器如何处理它。

我认为在这种情况下，不使用simple_form可能更简单，而是使用像Ryan Bates'Railscast #240, Search, Sort, Paginate with 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

Answer 2

它正在创建子表单，因为您将input传递给simple_form。请改用input_field。 （顺便说一句，这也适用于simple_fields_for）。

Answer 3

您需要自定义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; }

Answer 4

添加到Mark的回复：

因此，仅存在input_field来创建输入组件，它不会为您提供任何类型的标签/错误/包装器。这意味着你不会得到任何或标记包装字段，你应该手动执行，以防万一。

现在关于将表单与对象一起使用，SimpleForm是一个FormBuilder，这意味着它被创建用于处理命名空间，无论是对象还是符号。 SimpleForm的simple_form_for == Rails'form_for，总是需要一个对象命名空间才能使用。

对于像搜索表单这样简单的情况，你最好使用简单的表单助手，例如form_tag，正如你所指出的那样。没有必要依赖simple_form_for或form_for，我同意并且我通常会走这条路。

我希望有帮助，如果您仍有疑问，请告诉我。

Answer 5

更改：html =＆gt; {：class =＆gt; 'form-inline'} to：html =＆gt; {：class =＆gt; 'form-horizo​​ntal'}

Answer 6

你不能移动输入地址旁边的输入按钮吗？我认为它会解决问题

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

Answer 7

请所有遇到此问题的人不要使用流畅的布局，并确保为文档指定HTML5文档类型。