我有两个rails应用程序,'form-horizontal'正在一个,但不是另一个,我不知道为什么。
第一个应用程序称为“水平”(我的测试应用程序),另一个是“库存”
“横向”应用中的表单:
<%= 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 %>
在浏览器中显示如下:
以及“广告资源”应用的表单是:
<%= 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 %>
但在浏览器中看起来像这样:
为什么表单水平类不能在“库存”应用程序中运行?
似乎整数输入字段正在水平渲染,但在文本输入字段中发生了一些奇怪的事情。以下是“Inventory”应用程序的浏览器源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"><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>
我已经在Chrome和Firefox中进行了测试。我已经检查过bootstrap-sass gem和simple_form gem是相同的版本。我没有花哨的自定义css或javascript,只有两个应用中@import 'bootstrap';
文件中的bootstrap_custom.css.scss
行。我不知道为什么文本输入字段覆盖了“库存”应用程序中屏幕的整个宽度,但是整数字段看起来很好并且水平渲染。这有什么不对?
答案 0 :(得分:6)
我遇到了类似的问题,并在http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form
找到了一个非常快速的解决方法简单的修复是(在执行正常的简单形式bootstrap init stuff之后 - 见下文),你将以下代码添加到初始化器(如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
你要参加比赛了。
“普通的简单形式bootstrap init stuff”类似于:
rails generate simple_form:install --bootstrap
如果您需要水平表单,请将其添加到simple_form配置
config.form_class = "simple_form form-horizontal"
CAVEAT:根据最近的一些评论,似乎有许多评论不适用于simple_form
的更新版本。我前一段时间写过帖子,使用此代码的项目(对我来说)不再使用simple_form
,因此很难找到确切的版本号。我相信这将适用于2.x.的测试。一旦你到达v3,你可能会遇到问题,必须找到不同的解决方案。
答案 1 :(得分:3)
Simple Form 3.1.0.rc1已经发布!!这支持bootstrap 3.只需将您的gem更新到最新版本,这将解决您的问题。您可以通过此处的更改日志https://github.com/plataformatec/simple_form/blob/v3.1.0.rc1/CHANGELOG.md
查看其他增强功能答案 2 :(得分:3)
只需将simple_form
更新为
gem 'simple_form', '3.1.0.rc2'
然后重新运行
$ rails generate simple_form:install --bootstrap
答案 3 :(得分:2)
我尝试了很多不同的解决方案,但是在我为每个表单输入添加wrapper: :horizontal_form
行之前没有任何帮助。而且,我有最新的simple_form版本:3.2.1
例如:
= f.input :payment_term, wrapper: :horizontal_form
答案 4 :(得分:2)
要在每个表单的基础上覆盖,请更改:
<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %>
到
<%= simple_form_for(@item, wrapper: :horizontal_form) do |f| %>
将所有表单更改为水平,更改初始化程序:
config/initializers/simple_form_bootstrap.rb
行:
config.default_wrapper = :vertical_form
到
config.default_wrapper = :horizontal_form
(记得在更改初始化程序后重新启动rails服务器)
只更改单个输入,更改:
<%= f.input :on_order_qty %>
到
<%= f.input :on_order_qty, wrapper: :horizontal_form %>
答案 5 :(得分:1)
使用简单形式RC1。有一个完整的示例项目:https://github.com/rafaelfranca/simple_form-bootstrap。我刚刚复制了bootstrap初始化程序,并在https://github.com/rafaelfranca/simple_form-bootstrap/tree/master/app/views/examples处遵循了horirozontal视图示例。
答案 6 :(得分:1)
如果以上所有内容都不起作用,请尝试使用gem
gem&#39; simple_form_bootstrap3&#39;
需要将horizontal_for替换为horizontal_form_for
答案 7 :(得分:1)
请查看非常有用的示例应用程序,以便在Rails 4应用程序中使用Simple Form和Bootstrap工具包:
http://simple-form-bootstrap.plataformatec.com.br/
别忘了docs page。
答案 8 :(得分:1)
我的整个页面的输入字段全长都有问题。这就是我所做的,我希望它可以帮助别人 使用simple_form 3.4.0
打开config / initializers / simple_form_bootstrap.rb 在页面底部我更改了以下内容: 来自
config.default_wrapper = :vertical_form
config.wrapper_mappings = {
check_boxes: :vertical_radio_and_checkboxes,
radio_buttons: :vertical_radio_and_checkboxes,
file: :vertical_file_input,
boolean: :vertical_boolean,
datetime: :multi_select,
date: :multi_select,
time: :multi_select
}
end
要:
config.default_wrapper = :horizontal_form
config.wrapper_mappings = {
check_boxes: :horizontal_radio_and_checkboxes,
radio_buttons: :horizontal_radio_and_checkboxes,
file: :horizontal_file_input,
boolean: :horizontal_boolean,
datetime: :multi_select,
date: :multi_select,
time: :multi_select
}
end
然后重新启动您的应用以重新初始化。
答案 9 :(得分:0)
当我在代码中使用form-horizontal时,我还使用bootstrap类修改不同的输入。例如,使用bootstrap 3:
<div class="form-group">
<%= f.label :name, class: "control-label col-sm-3" %>
<div class="col-sm-4"><%= f.text_field :name, placeholder: "Your placeholder", class: "form-control" %></div>
</div>
现在,如果您想要应用的整个宽度,可以将col-sm调整为col-sm-12。我认为以这种方式定制更容易。 (col-sm用于bootstrap 3,如果你需要旧版本,我认为你必须使用旧的版本符号)
有关bootsrap表单的更多信息:doc
以下是带有bootstrap 2和简单形式的代码示例:doc
带有bootsrap 2的输出表单应如下所示:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<input type="text" id="Name" placeholder="Name">
</div>
</div>
</form>
我认为你需要设置一个控制组类div和一个控件类div。
以下是旧语法的文档形式:doc
希望有所帮助