Inputs on the same row using bootstrap

[Tim Reistetter]

I've been googling forever, and this seems like such a simple problem.  My form is this:

            <%= simple_form_for @roomtype do |f| %>   
              <%= f.input :name %>
              <%= f.input :maxguests, label: 'Maximum Guests', :collection => 1..11 %>
              <%=  f.button :submit, 'Add Room Type' , :class => 'btn btn-primary', :type => 'submit' %>
              <% end %>

What do I need to do so that those two inputs show up next to eachother?  I know that boot strap has a horizontal form, but I want a more general solution where I can say that in a form, these two inputs will be next to each other?  I tried using the .controls-row class option, but it didn't seem to do anything.  I'd love any help.

[Javier Quarite]

Once a wrapped the entire form with a table and each input as a td of a tr... maybe there's another way using <div class="row> and wrapping the inputs with spans

[mbratch]

Have you tried using the :wrapper_tag option for your inputs? It works in the latest version of simple_form:

<%= f.input :name, :wrapper_tag => :span %>

<%= f.input :maxguests, label: 'Maximum Guests', :collection 

=> 1..11, :wrapper_tag => :span %>

Does that work for you? Otherwise, the table idea that Javier mentioned works well, too. I've used it many times.

[Tim Reistetter]

I'm sorry, I don't really understand what you want me to try with the tables. 

Addding a <div class="row"> around the inputs didn't do anything.

[Tim Reistetter]

This takes away the padding/margins between the rows, but doesn't put them on the same line.  Can you give me an example of a working form you have with this?

What version of simple_form are you using?  I am on 2.0.2

[mbratch]

Not sure why the :wrapper_tag didn't work for you. I'd have to see how you used it and the resulting HTML to help with that.

To use tables, you could do something like this:

<%= simple_form_for @roomtype do |f| %>

<table>

<tr>

  <td><%= f.input :name %></td>
  <td><%= f.input :maxguests, label: 'Maximum Guests', :collection => 1..11 %></td>

</tr>

</table>

<%=  f.button :submit, 'Add Room Type' , :class => 'btn btn-primary', :type => 'submit' %>

<% end %>

That's just an example. It would put the inputs on one row, and the submit button on the next line. Sprinkle in some CSS to adjust the spacing/positions to taste. You might need to set the table border to 0 in CSS to make the table borders invisible.

[Tim Reistetter]

Ok, so the table solution worked. 

How good of a practice is this though?  I'm new to web development, but that seems like a hack that's going to come back and haunt me.

[mbratch]

I don't think it's hack at all. A table is a tag for structuring information on a web page into an array. In your case, it's 1 row by 2 columns. But if you wanted to have more rows, they are easily added just by adding more rows. I see tables  used frequently on websites to structure text and data when an array structure is desired.

The only thing you need to worry about is whether table behavior is what you want in corner cases, like what happens if the user changes the size of their screen. Much of this can be controlled using table CSS properties.

You could still accomplish what you want with div by adjusting its properties such as margins and whether the display is float left or float right, etc. I actually find this more hack than a table. But each has their own taste and experience in rending what they want in HTML.

[Tim Reistetter]

"The only thing you need to worry about is whether table behavior is what you want in corner cases, like what happens if the user changes the size of their screen. Much of this can be controlled using table CSS properties."

That is what I am most worried about.  I mean, bootstrap comes with spans and rows for a reason.  I feel like that's what I should be using .

[mbratch]

Everything in HTML has its risks, depending upon browser, browser version, etc. You always need to learn about the behavior of your constructs in various scenarios, regarding of the construct. They all have something that can go a bit off of what you expect. A 'table' construct is no more 'trick' or 'hack' than any other construct when being used for this purpose we're discussing here. I just happen to have used it quite a bit and am comfortable with it, and I've seen it on many sites having done a "view source" on them.

There may be no special reason bootstrap uses spans other than that's what the developer was comfortable with.

But if you want to stick with div, then you could try this:

<%= simple_form_for @roomtype do |f| %>

  <%= f.input :name, :wrapper_html => {:style => "float: left"} %>

  <%= f.input :maxguests, label: 'Maximum Guests', :collection => 1..11%>

  <%=  f.button :submit, 'Add Room Type' , :class => 'btn btn-primary', :type => 'submit' %>

<% end %>

That might give you the effect you're after. You might need to toss in additional CSS to control its behavior more specifically, but the float: left may put the name left of the max guests. It does carry the same caveat: "The only thing you need to worry about is whether [the div] behavior is what you want in corner cases, like what happens if the user changes the size of their screen." :)