simple_form 'form-inline' not working

问题

I'm trying to make two input (firstname and lastname) to next to each other.

Here is my code and it's currently just showing two big rows of input window.

= 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

I'm now sure how to make them to display inline. Can anyone help me?

Thanks!

Updated. This is the actual HTML generate from

= 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="&#x2713;" /><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>

回答1:

You should install the simple_form wrappers:

rails generate simple_form:install --bootstrap

From there you can structure a inline_form using it's corresponding wrapper:

simple_form_for @user, wrapper: :inline_form, html: { class: 'form-inline' } ...

They have an example app: https://github.com/rafaelfranca/simple_form-bootstrap

The specific view that using this is (sorry it's ERB however):

https://github.com/rafaelfranca/simple_form-bootstrap/blob/master/app/views/examples/_inline_form_sf.html.erb

回答2:

Try using f.input_field instead of f.input.

Reference: https://github.com/plataformatec/simple_form#stripping-away-all-wrapper-divs

回答3:

The simple_form gem uses Bootstrap, right? I compared your code to the Bootstrap Form docs and I think you should be using form-group classes inside the form-inline.

= 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

Alternatively, unless you have unique CSS that you need to apply for the form-1 and form-1-detail classes, this might be able to be shortened to:

= 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-group
        = f.input :last_name, required: true
     .form-group
        = f.input :first_name, required: true

If that doesn't work, can you post the actual HTML that is generated for the form in the browser?

来源：https://stackoverflow.com/questions/35733167/simple-form-form-inline-not-working

标签

ruby-on-rails

simple-form

slim-lang