Simple_Form';内联表单不起作用 [英] simple_form 'form-inline' not working
本文介绍了Simple_Form';内联表单不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将两个输入(名字和姓氏)放在一起。
这是我的代码,它当前只显示两大行输入窗口。
= simple_form_for @user, html: {class: 'form-inline'} do |f|
= f.fields_for :profile, @user.profile || Profile.new, html: {class: 'form-inline'} do |p|
.form-1
.form-1-detail
.input-text
= f.input :last_name, required: true
.input-text
= f.input :first_name, required: true
我现在确定如何使它们以内联方式显示。有人能帮帮我吗?
谢谢!
已更新。这是从
生成的实际HTML
= simple_form_for @user, html: {class: 'form-inline'} do |f|
= f.fields_for :profile, @user.profile || Profile.new do |p| # removed form-inline here
.form-1
.form-1-detail
.form-group
= f.input :last_name, required: true
.form-group
= f.input :first_name, required: true
</div><form class="simple_form form-inline" novalidate="novalidate" id="new_user" action="/users" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="DhQSodBk8kxdE6q9uPJDKSs9FfxCNLyXFYT3bZ42HlZfHefxfG3BDq9qkFpxkX7MBZI4Mc4Wje6LKw7Gp1YcjQ==" />
<div class="form-1">
<div class="form-1-detail">
<div class="form-group">
<div class="input string required user_last_name"><label class="string required" for="user_last_name"><abbr title="required">*</abbr> 姓</label><input class="string required" placeholder="姓" type="text" name="user[last_name]" id="user_last_name" /></div>
</div>
<div class="form-group">
<div class="input string required user_first_name"><label class="string required" for="user_first_name"><abbr title="required">*</abbr> 名</label><input class="string required" placeholder="名" type="text" name="user[first_name]" id="user_first_name" /></div>
</div>
</div>
</div></form>
推荐答案
您应该安装Simple_Form包装器:
rails generate simple_form:install --bootstrap
在那里,您可以使用相应的包装器来构造inline_form:
simple_form_for @user, wrapper: :inline_form, html: { class: 'form-inline' } ...
他们有一个示例应用程序:https://github.com/rafaelfranca/simple_form-bootstrap
使用它的特定视图是(抱歉,它是ERB):
这篇关于Simple_Form';内联表单不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文