Take the 2-minute tour ×

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| %>
  <%= 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">
    <input name="authenticity_token" type="hidden" value="0AioAbZTS1DDqSUAJTemYX1hmspuISokx1IsWdNzADw=" />

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

The actual form rendered:


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


Note the slight change in where the button is rendered.

share|improve this question
add comment

2 Answers

up vote 0 down vote accepted

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.)

share|improve this answer
Looks spot on. If I pass a class of "span2" to the select, it can fit in the "form-inline". Bit lame, I was kinda dreaming it would just auto-magically resize and make it fit. –  SinFulNard Sep 6 '12 at 10:37
add comment

The rendering is likely due to the css styling on the elements.

Generally html objects are placed on the same line if they are display: inline, and display on separate lines when they are display: block.

Try setting the style="display: inline" on the select and submit button (in case some other css file already defines it to display as block). If that works, you can move it into a css file.


<%= collection_select(:checkin, :park_id, Park.all, :id, :name, {}, {style: "display: inline"}) %>

<%= f.submit "Check in", class: "btn", style: "display: inline" %>

Inline and block elements may display differently. If you need to inline an element, but still display like a block, you can try the hybrid display: inline-block style.

share|improve this answer
Sadly, no dice. I can see the HTML reflecting the change "style="display: inline"" but the rendering remains unchanged. –  SinFulNard Sep 6 '12 at 7:29
If you have chrome or firefox, try right-click on the select and submit button, and "inspect element". This will tell you the "computed style" on the right hand side (including styling defined in other places). Then you will have a better idea of what might be causing the change in line. –  ronalchn Sep 6 '12 at 8:11
add comment

Your Answer


