Simple Form format without custom CSS in rails

Question

I use simple_form gem in rails project and am going to implement a form. The form is very simple:

<%= simple_form_for admin, url: url do |f| %>
  <div class="form-inputs">
    <%= f.input :name %>   #String
    <%= f.input :email %>   #String
    <%= f.input :sso_only %>   #Boolean
  </div>
<% end %>

The generated html is:

<form novalidate="novalidate" class="simple_form new_user" id="new_user" action="/admin/admins" accept-charset="UTF-8" method="post">
  <div class="form-group string required user_name">
    <label class="string required col-sm-4 control-label" for="user_name">
      <abbr title="required">*</abbr>
       Name
    </label>
    <div class="col-sm-8">
      <input class="string required form-control" type="text" name="user[name]" id="user_name">
    </div>
  </div>
  <div class="form-group email required user_email">
    <label class="email required col-sm-4 control-label" for="user_email">
      <abbr title="required">*</abbr>
       Email
    </label>
    <div class="col-sm-8">
      <input class="string email required form-control" type="email" value="" name="user[email]" id="user_email">
    </div>
  </div>
  <div class="form-group boolean optional user_sso_only">
    <div class="col-sm-8">
      <div class="checkbox">
        <input value="0" type="hidden" name="user[sso_only]">
        <label class="boolean optional" for="user_sso_only">
          <input class="boolean optional" type="checkbox" value="1" name="user[sso_only]" id="user_sso_only">
          SSO Only
        </label>
      </div>
    </div>
  </div>
</form>

The display is:

From the image we can see, the name and email fields include label and input two parts. label has 4 size and input has 8.

However, the checkbox only include one part, which is 8. So it is very ugly when the checkbox in that position.

Normally, I would like the checkbox starts at the same position as the input box. And that should be the normal display for a form.

Therefore, is there any way to reach this by using simple_form itself? without customise the CSS.

I have tried wrapper but failed.

Matenia Rossides · Accepted Answer · 2017-08-09 00:59:54Z

1

To achieve the result you want, and allow customisation, you'll need to make a modification to both your markup and the wrapper.

see: https://github.com/plataformatec/simple_form#the-wrappers-api

You can modify the existing top level wrapper to expose the div for which you want to include the offset.

Your erb markup for the sso_only field can be modified like so:

<%= f.input :sso_only, checkbox_wrapper_html: { class: 'col-sm-offset-4' } %>

Then, in order for the markup to recognise the modification, you have to change your existing initializer containing your wrapper definitions to respond to the checkbox_wrapper option (taken from the defaults).

# config/initializers/simple_form.rb
....
config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.optional :readonly

  b.wrapper :checkbox_wrapper, tag: 'div', class: 'col-sm-8' do |wr|
    wr.wrapper tag: 'div', class: 'checkbox' do |ba|
      ba.use :label_input
    end

    wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    wr.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end
end
....

note the addition of :checkbox_wrapper within the block. This will allow you to use the checkbox_wrapper_html option in the markup as mentioned above.

This can also be applied to any other existing wrapper.

answered Aug 9, 2017 at 0:59

Matenia Rossides

1,4249 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephen Over a year ago

Thanks Matenia, that's what I want!

John Pollard · Accepted Answer · 2017-08-08 14:39:34Z

0

Im not familar with simple form but it looks like you need another column like your inputs. Try adding some kind of span with the 'col-sm-4' class.

 <span class="col-sm-4 control-label" for=""></span>
 <div class="col-sm-8">
      <div class="checkbox">
        <input value="0" type="hidden" name="user[sso_only]">
        <label class="boolean optional" for="user_sso_only">
          <input class="boolean optional" type="checkbox" value="1" name="user[sso_only]" id="user_sso_only">
          SSO Only
        </label>
      </div>
    </div>

answered Aug 8, 2017 at 14:39

John Pollard

3,8993 gold badges29 silver badges52 bronze badges

2 Comments

Stephen Over a year ago

Thanks for your answer. The simple_form limited you to modify the generated html structure and you have to consider it by the provided strategy.

Stephen Over a year ago

As you saw, under form node there are three div nodes. I can only modify html directly on this level. All the code inside the three div nodes are generated by simple_form, and should be modified using the simple_form interface.

Collectives™ on Stack Overflow

Simple Form format without custom CSS in rails

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related