0

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.

SinFulNard
  • 173
  • 2
  • 2
  • 10

2 Answers2

0

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.

Try:

<%= 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.

ronalchn
  • 12,225
  • 10
  • 51
  • 61
  • Sadly, no dice. I can see the HTML reflecting the change "style="display: inline"" but the rendering remains unchanged. – SinFulNard Sep 06 '12 at 07: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 06 '12 at 08:11
0

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

albertedevigo
  • 18,262
  • 6
  • 52
  • 58
  • 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 06 '12 at 10:37