- 首页
- 其他开发
- 带有引导程序 3 的 Simple_form 类表单水平无法在 Rails 4 中工作
带有引导程序 3 的 Simple_form 类表单水平无法在 Rails 4 中工作
[英] Simple_form class form-horizontal with bootstrap 3 not working in rails 4
本文介绍了带有引导程序 3 的 Simple_form 类表单水平无法在 Rails 4 中工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个 rails 应用程序，form-horizontal"在一个应用程序中运行，但在另一个中不起作用，我不知道为什么.
第一个应用名为Horizontal"(我的测试应用)，另一个名为Inventory"
水平"应用中的表单:
<%= simple_form_for(@part, html: {class: 'form-horizontal' }) do |f|％＞<div class="field"><%= f.input :name %>
<div class="field"><%= f.input :number %>
<div class="actions"><%= f.submit %>
<%结束%>
在浏览器中看起来像这样:
horizontal
库存"应用的表单是:
<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f|％＞<%= f.error_notification %><div class="field"><%= f.input :part_number %>
<div class="field"><%= f.input :on_order_qty %><%= f.input :revision %><%= f.input :current_rev %><%= f.input :name, required: false%><br>
<%= f.simple_fields_for :parts do |part|％＞<%= 渲染 'part_fields', :f =>部分％＞<%结束%><div class="links"><%= link_to_add_association '添加附加供应商', f, :parts %><br><br>
<div class="fields"><%= f.input :stock_qty %><%= f.input :ncmr_qty %>
<div class="form-actions"><%= f.submit %>
<%结束%>
但在浏览器中是这样的:
为什么库存"应用程序中的表单水平类不起作用?
整数输入字段似乎是水平呈现的，但文本输入字段中发生了一些奇怪的事情.这是来自浏览器的库存"应用的源 html:
<form accept-charset="UTF-8" action="/items" class="simple_form form-horizontal"id="new_item" method="post"><div style="margin:0;padding:0;display:inline"><inputname="utf8" type="hidden" value="✓"/><input name="authenticity_token"type="hidden" value="H3DKGhGdtfv1e8F1rg9TgDJUyaBspXOSFMpm2gnjwzk="/></div><div class="field"><div class="需要输入字符串 item_part_number"><label class="需要字符串"for="item_part_number"><abbr title="required">*</abbr>部件号</label><输入咏叹调required="true" class="string required" id="item_part_number" maxlength="255"name="item[part_number]" required="required" size="255" type="text"/></div><div class="field"><div class="输入整数可选 item_on_order_qty"><label class="整数可选"for="item_on_order_qty">订购数量</label><input class="numeric integer optional"id="item_on_order_qty" name="item[on_order_qty]" step="1" type="number"/></div><div class="输入字符串可选 item_revision"><label class="字符串可选"for="item_revision">Revision</label><input class="string optional" id="item_revision"maxlength="255" name="item[revision]" size="255" type="text"/></div><div class="input boolean optional item_current_rev"><input name="item[current_rev]"type="hidden" value="0"/><input class="boolean optional" id="item_current_rev"name="item[current_rev]" type="checkbox" value="1"/><label class="boolean optional"for="item_current_rev">当前转速</label></div><div class="输入字符串可选 item_name"><label class="字符串可选"for="item_name">Name</label><input class="string optional" id="item_name" maxlength="255"name="item[name]" size="255" type="text"/></div><br>
(为了简洁起见，我取出了嵌套字段的 html 和其他一些字段)<div class="form-actions"><input name="commit" type="submit" value="Create Item"/>
</表单>
我已经在 Chrome 和 Firefox 中进行了测试.我已经检查过 bootstrap-sass gem 和 simple_form gem 是相同的版本.我没有花哨的自定义 css 或 javascript，只有两个应用程序中 bootstrap_custom.css.scss 文件中的 @import 'bootstrap'; 行.我不知道为什么文本输入字段覆盖了库存"应用程序中的整个屏幕宽度，但整数字段似乎很好并且水平呈现.这里有什么问题吗?
解决方案
我遇到了类似的问题，并在这里找到了一个非常快速的解决方案 http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form
简单的修复是(在执行普通的简单表单引导程序初始化之后 - 见下文)，将以下代码添加到初始化程序(如 config/initializers/simple_form_bootstrap.rb)
inputs = %w[集合选择输入日期时间输入文件输入分组集合选择输入数字输入密码输入范围输入字符串输入文本输入]input.each 做 |input_type|superclass = "SimpleForm::Inputs::#{input_type}".constantizenew_class = Class.new(superclass) 做def input_html_classessuper.push('表单控件')结尾结尾Object.const_set(input_type, new_class)结尾
然后你就要去比赛了.
正常的简单形式引导程序初始化内容"类似于:
rails 生成 simple_form:install --bootstrap
如果您想要水平表单，请将其添加到您的 simple_form 配置中
config.form_class = "simple_form form-horizontal"
CAVEAT:根据最近的一些评论，这似乎不适用于更新版本的 simple_form.我前段时间写了这篇文章，使用这个代码的项目(对我来说)不再使用 simple_form 所以很难找到确切的版本号.我相信这适用于版本 2.x.升级到 v3 后，您可能会遇到问题，必须找到不同的解决方案.
I have two rails apps, and the 'form-horizontal' is working in one, but not the other, and I have no idea why.
First app is called "Horizontal" (my test app) and the other is "Inventory"
Form in "horizontal" app:
<%= simple_form_for(@part, html: {class: 'form-horizontal' }) do |f| %>
<div class="field">
<%= f.input :name %>
</div>
<div class="field">
<%= f.input :number %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
and looks like this in the browser:
and the form for the "inventory" app is:
<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<div class="field">
<%= f.input :part_number %>
</div>
<div class="field">
<%= f.input :on_order_qty %>
<%= f.input :revision %>
<%= f.input :current_rev %>
<%= f.input :name, required: false%><br>
</div>
<%= f.simple_fields_for :parts do |part| %>
<%= render 'part_fields', :f => part %>
<% end %>
<div class="links">
<%= link_to_add_association 'Add additional supplier', f, :parts %><br><br>
</div>
<div class="fields">
<%= f.input :stock_qty %>
<%= f.input :ncmr_qty %>
</div>
<div class="form-actions">
<%= f.submit %>
</div>
<% end %>
but it looks like this in the browser:
Why won't the form-horizontal class work in the "Inventory" app?
It appears that the integer input fields are getting rendered horizontally, but something weird is happening in the text input fields. Here is the source html from the browser for the "Inventory" app:
<form accept-charset="UTF-8" action="/items" class="simple_form form-horizontal"
id="new_item" method="post"><div style="margin:0;padding:0;display:inline"><input
name="utf8" type="hidden" value="✓" /><input name="authenticity_token"
type="hidden" value="H3DKGhGdtfv1e8F1rg9TgDJUyaBspXOSFMpm2gnjwzk=" /></div>
<div class="field">
<div class="input string required item_part_number"><label class="string required"
for="item_part_number"><abbr title="required">*</abbr> Part number</label><input aria
required="true" class="string required" id="item_part_number" maxlength="255"
name="item[part_number]" required="required" size="255" type="text" /></div>
</div>
<div class="field">
<div class="input integer optional item_on_order_qty"><label class="integer optional"
for="item_on_order_qty">On order qty</label><input class="numeric integer optional"
id="item_on_order_qty" name="item[on_order_qty]" step="1" type="number" /></div>
<div class="input string optional item_revision"><label class="string optional"
for="item_revision">Revision</label><input class="string optional" id="item_revision"
maxlength="255" name="item[revision]" size="255" type="text" /></div>
<div class="input boolean optional item_current_rev"><input name="item[current_rev]"
type="hidden" value="0" /><input class="boolean optional" id="item_current_rev"
name="item[current_rev]" type="checkbox" value="1" /><label class="boolean optional"
for="item_current_rev">Current rev</label></div>
<div class="input string optional item_name"><label class="string optional"
for="item_name">Name</label><input class="string optional" id="item_name" maxlength="255"
name="item[name]" size="255" type="text" /></div><br>
</div>
( I took out the html for the nested fields and some other fields for brevity)
<div class="form-actions">
<input name="commit" type="submit" value="Create Item" />
</div>
</form>
I've tested in both Chrome and Firefox. I've checked that the bootstrap-sass gem and simple_form gem are the same versions. I have no fancy customization css or javascript, just the @import 'bootstrap'; line in a bootstrap_custom.css.scss file in both apps. I don't know why the text input fields cover the whole width of the screen in the "Inventory" app, but the integer fields seem to be fine and rendering horizontally. What's wrong here?
解决方案
I ran into a similar issue and found a pretty quick fix here http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form
The simple fix is (after doing the normal simple form bootstrap init stuff -see below), you add the following code to an initializer (like config/initializers/simple_form_bootstrap.rb)
inputs = %w[
CollectionSelectInput
DateTimeInput
FileInput
GroupedCollectionSelectInput
NumericInput
PasswordInput
RangeInput
StringInput
TextInput
]
inputs.each do |input_type|
superclass = "SimpleForm::Inputs::#{input_type}".constantize
new_class = Class.new(superclass) do
def input_html_classes
super.push('form-control')
end
end
Object.const_set(input_type, new_class)
end
and you are off to the races.
The "normal simple form bootstrap init stuff" goes something like:
rails generate simple_form:install --bootstrap
If you want horizontal forms, add this to your simple_form config
config.form_class = "simple_form form-horizontal"
CAVEAT: Based on some recent comments, it appears this many not work for more recent versions of simple_form. I wrote the post some time ago and the project that was using this code (for me) is no longer using simple_form so it's hard to track down the exact version number. I believe this will work for verisions 2.x. Once you get to v3 you may have issues and have to find a different solution.
这篇关于带有引导程序 3 的 Simple_form 类表单水平无法在 Rails 4 中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
