CODEWITHSUNDEEP
cssruby-on-rails-4twitter-bootstrap-3simple-form
Avery Michelle Dawn
Avery Michelle Dawn

Reputation: 319

Bootstrap input button not aligning with other fields

a busy cat
(source: bryancorrell.com)

I was able fix the alignment issue, but then I lose the rounded corners on the inputs and can't figure out how to get them back. See the link below:

https://jsfiddle.net/yzw8q28q/5/

<form class="simple_form form-inline" novalidate="novalidate" action="/dashboard/school" accept-charset="UTF-8" method="get">
  <div class="form-group select required filter_discipline_id">
    <select class="select required form-control" placeholder="Discipline" name="filter[discipline_id]" id="filter_discipline_id">
      <option value="">- Discipline -</option>
      <option selected="selected" value="1">HW</option>
      <option value="2">SW</option>
    </select>
  </div>
  <div class="form-group">
    <input type="submit" name="commit" value="Filter" class="btn btn-default btn btn-primary form-control" />
  </div>
</form>

<br /><hr /><br />

<div class="input-group">
  <form class="simple_form form-inline" novalidate="novalidate" action="/dashboard/school" accept-charset="UTF-8" method="get">
    <div class="form-group select required filter_discipline_id">
      <select class="select required form-control" placeholder="Discipline" name="filter[discipline_id]" id="filter_discipline_id">
        <option value="">- Discipline -</option>
        <option selected="selected" value="1">HW</option>
        <option value="2">SW</option>
      </select>
    </div>
    <div class="form-group">
      <input type="submit" name="commit" value="Filter" class="btn btn-default btn btn-primary form-control" />
    </div>
  </form>
</div>

Ruby Code that's generating the HTML form:

<%= minimal_form_for :filter, url: @form_path, method: :get, html: {class: 'form-inline' } do |f| %>
<%= f.error_notification %>
<%= f.input :discipline_id, 
  collection: Discipline.all, 
  include_blank: '- Discipline -', 
  selected: params[:discipline_id] %>
<div class="form-group">
    <%= f.button :submit, 'Filter', class: "btn-primary form-control" %>
</div>

It looks like simple_form is injecting the "btn" class. Not sure how to stop that.

Upvotes: 0

Views: 3617

Answers (3)

Victoria French
Victoria French

Reputation: 766

In your case you can simply remove the btn class off the input.

<input type="submit" name="commit" value="Filter" class="btn-primary form-control" />

Or you can add the following to your own css:

.form-group .btn {
   margin-bottom: 15px;
}

** Updated **: When filing the bug report I noticed I had the margin bottom backwards.

Upvotes: 1

rmjoia
rmjoia

Reputation: 980

Where you have 

<div class="form-group">
    <input type="submit" name="commit" value="Filter" class="btn btn-default btn btn-primary form-control" />
</div>

replace by 

<div class="form-group">
    <input type="submit" name="commit" value="Filter" class="btn-primary form-control" />
</div>

there's no need to call the classes multiple times and in this case, the .btn is causing your issue

Tested on your fiddle, works like a charm ;)

Upvotes: 2

Frank W.
Frank W.

Reputation: 787

On the class btn you have a

margin-bottom:0px;

Remove that line and it will align properly.

Upvotes: 0

Related Questions