使用simple_form和Bootstrap时遇到问题3.关于输入的包装器标签。显示以下代码:
查看代码(含haml)
= simple_form_for @refer_email_form, url: create_refer_message_path, html: { class: "form-horizontal" } do |f|
= f.input :to, label_html: { class: "col-sm-2" }
= f.input :subject, label_html: { class: "col-sm-2" }
配置/ simple_form_bootstrap.rb
SimpleForm.setup do |config|
config.input_class = "form-control"
config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'error' do |b|
b.use :html5
b.use :placeholder
b.use :label, class: "control-label"
# b.wrapper tag: 'div', class: "col-sm-6" do |ba|
b.wrapper tag: 'div' do |ba|
ba.use :input
ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
config.default_wrapper = :bootstrap
我只想默认使用“水平表格”
生成的HTML
...
\<div class="form-group string optional refer_email_form_to">
<label class="string optional control-label col-sm-2" for="refer_email_form_to">To</label>
<div>
<input class="string optional form-control" id="refer_email_form_to" name="refer_email_form[to]" type="text">
</div>
</div>
...
我想要的是更改<div>
包含<input>
元素的类,如下所示:
...
<div class="col-sm-6">
<input class="string optional form-control" id="refer_email_form_to" name="refer_email_form[to]" type="text">
<div>
...
我已经从simple_form的github页面阅读了README,并且搜索了这个问题,我知道我可以通过将b.wrapper tag: 'div', class: "col-sm-6" do |ba|
添加到 config / simple_form_bootstrap.rb 文件来实现这一目的,但是真正的问题是我可能会为div使用不同的类,也许是其他形式的col-sm-9
。我在视图中尝试了input_html
,wrapper_html
,但wrapper_html
对第一个<div class="form-group">
和input_html
的影响仅对<input>
产生影响元素
有没有办法在视图中动态更改<input>
的包装<div>
?
答案 0 :(得分:18)
更改
b.wrapper tag: 'div' do |ba|
到
b.wrapper :my_wrapper, tag: 'div' do |ba|
设置输入字段如下
= f.input :to, label_html: { class: "col-sm-2" }, wrapper: :bootstrap, my_wrapper_html: { class: "css-class-name-goes-here" }
生成的HTML是
<div class="form-group string optional refer_email_form_to">
<label class="string optional control-label col-sm-2" for="refer_email_form_to">To</label>
<div class="css-class-name-goes-here">
<input class="string optional form-control" id="refer_email_form_to" name="refer_email_form[to]" type="text">
</div>
</div>
备注强>
config.default_wrapper = :bootstrap
bootstrap
时,它不起作用。当我使用其他名称(例如bootstrap_x
)时,此设置有效。这可能是我的本地问题所以这只是为了您的信息,以防您遇到同样的问题。