I'm using simple_form gem
simple_form adds unneeded padding between my inputs, shifts buttons and cuts space between label and input(check the screenshot)
How can I fix it?
this is the wrapper of the form: edit.html.erb
<div class="panel panel-primary" data-collapsed="0">
<div class="panel-heading">
<div class="panel-title">
Editing: <%= @user.username %>
</div>
</div>
<div class="panel-body">
<%= render 'form' %>
</div>
</div>
this is the _form.html.erb
<%= simple_form_for @user,
defaults: { input_html: { class: 'form-control ' } },
html: {class:"form-horizontal form-groups-bordered"} do |f| %>
<div class="form-group">
<label for="field-1" class="col-sm-3 control-label">Name</label>
<div class="col-sm-5">
<%= f.input :name, placeholder: "", label: false %>
</div>
</div>
<div class="form-group ">
<label for="field-1" class="col-sm-3 control-label">Contact details</label>
<div class="col-sm-5 ">
<%= f.input :contact_details,
placeholder: "",
label: false %>
</div>
</div>
<div class="form-group">
<label for="field-ta" class="col-sm-3 control-label">Info</label>
<div class="col-sm-5" >
<%= f.input :user_info,
as: :text,
placeholder: "",
input_html: { style:"overflow: hidden; word-wrap: break-word; resize: horizontal; height: 100px;"},
label: false %>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-5">
<%= f.button :submit, "Save", class: "btn btn-primary" %>
<%= link_to "Cancel", @user, class: "btn btn-default" %>
</div>
</div>
<% end %>
I found out that simple_form adds a wrapper div around inputs (screenshot)
Not sure, but the last time I used it, it didn't add any wrappers.
So, I used f.input_field
instead of f.input
that according to documentation removes all the wrapper divs.
Here's one of the updated form inputs.
<%= f.input_field :current_build, class:"form-control", label: false %>