Search code examples
ruby-on-railstwitter-bootstraptwitter-bootstrap-rails

Why won't my form-inline class be honoured?

I'm defining a form using the built-in 'form_for' utility. I have the bootstrap-sass gem defined (which is correctly being applied). For some reason, my button will not render on the same line as the select box.

My view (showing the render code):

<%= form_for @checkin, html: {class: "form-inline" } do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <%= collection_select(:checkin, :park_id, Park.all, :id, :name) %>
  <%= f.submit "Check in", class: "btn" %>
<% end %>

The rendered HTML:

<form accept-charset="UTF-8" action="/checkins" class="form-inline" id="new_checkin" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="authenticity_token" type="hidden" value="0AioAbZTS1DDqSUAJTemYX1hmspuISokx1IsWdNzADw=" />
  </div>

  <select id="checkin_park_id" name="checkin[park_id]">
    <option value="1">Moore Park</option>
    <option value="2">Moorish Park</option>
  </select>
  <input class="btn" name="commit" type="submit" value="Check in" />
</form>

The actual form rendered:

1

And here is the form rendered with the "form-inline" class removed:

2

Note the slight change in where the button is rendered.

Solution

  • The problem is that selectin Bootstrap has a fixed width of 220px. This, added to your button overflows in your .span4.
    To solve it, you'll have to resize your select in any way (.span2 class, .input-small class, CSS styling, etc.)