Ruby-on-rails Simple_form 引导程序样式内联表单无法正常工作

Simple_form bootstrap style inline-form not working properly

提问by Abram

I have a working twitter bootstrap install and simple form generates the following:

我有一个有效的 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>

Somehow the "Find!" button won't appear on the same line as the search box. Any ideas?

不知何故“找到！” 按钮不会与搜索框出现在同一行。有任何想法吗？

Thanks!

谢谢！

UPDATE:

更新：

Sorry I should have mentioned that all the markup is generated by simple_form based on the following:

抱歉，我应该提到所有标记都是由 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 %>

So, really, there seems to be an issue with the generated markup, even though I have run the bootstrap install for simple_form, etc.

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

The above image shows a straight html form

上图显示了一个直接的 html 表单

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

...above the one generated by simple_form.

...在 simple_form 生成的上面。

回答by Mark Berry

I think there are a couple issues here. One is the formatting, and the way simple_form adds a <div>around the input field. @Ron's suggestion of using input_fieldworks for me with simple_form 2.0.1. My example is searching for name in a Contacts table. The following makes the text box and button appear side by side:

我认为这里有几个问题。一种是格式，simple_form<div>在输入字段周围添加 a 的方式。input_field@Ron建议使用simple_form 2.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 %>

The other issue is that it seems simple_form usually assumes you want to work with model and field names. The example above uses a :symbolinstead of a @modelas the first argument as suggested here. But that still generates an input field named contact[search]so you'd have to tell your controller how to deal with that.

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

I think in this case it may be simpler to notuse simple_form and instead use something like the form near the beginning of Ryan Bates' Railscast #240, Search, Sort, Paginate with AJAX:

我认为在这种情况下，不使用 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 %>

Now the field is just named "search" and I can consume it in my controller's #index method something like this:

现在该字段被命名为“搜索”，我可以在控制器的 #index 方法中使用它，如下所示：

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

assuming I have this in my model:

假设我的模型中有这个：

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

回答by Ron

It's creating subforms because you're passing inputto simple_form. Use input_fieldinstead. (BTW, this also works with simple_fields_for).

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

回答by GuiGS

You need to customize the control-groupand controlsdiv classes to display as inline-blockwhen they are under a form-inlineform:

您需要自定义control-group和controlsdiv 类以inline-block在form-inline表单下显示它们：

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

回答by Carlos Antonio

Adding to Mark's reply:

添加到马克的回复：

So, input_fieldexists to create the inputcomponent only, it won't give you any sort of label/error/wrapper. That means you won't get any or tag wrapping the field, you should do that manually in case you want to.

因此，input_field存在仅用于创建输入组件，它不会为您提供任何类型的标签/错误/包装器。这意味着您不会得到任何或标签包装该字段，如果您愿意，您应该手动执行此操作。

Now about using the form with an object, SimpleForm is a FormBuilder, which means it was created to work with a namespace, either an object or a symbol. SimpleForm's simple_form_for== Rails' form_for, you alwaysneed an object namespace to work with.

现在关于将表单与对象一起使用，SimpleForm 是一个 FormBuilder，这意味着它被创建来使用命名空间，对象或符号。SimpleForm's simple_form_for== Rails' form_for，你总是需要一个对象命名空间来使用。

For such a simple case as a search form, you're better off with simple form helpers such as form_tag, as you've pointed out. There's no need to rely on simple_form_foror form_forfor that, I agree and I usually go down that path.

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

I hope that helps, let me know if you still have doubts.

希望对你有所帮助，如果你还有疑问，请告诉我。

回答by Lauro Caetano

Change the :html => { :class => 'form-inline' } to :html => { :class => 'form-horizontal' }

将 :html => { :class => 'form-inline' } 更改为 :html => { :class => 'form-horizo​​ntal' }

回答by William Calvin

can't you move the input button next to input address? I think it will solve the problem

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

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

回答by Fran García

Please, all people with this problem, don't use fluid layout and be sure you are specifying the HTML5 doctype to the documents.

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