Rails: How to make "button_to" button to appear on the sameline (without a newline)?

Question

I have a block -iterator to display a user and a related action to be displayed on the same line for every iteration ?
You can visualize like this :-

user1  update_attribute_button
user2  update_attribute_button.
...
and so on.

But if I use a button_to method the button is getting displayed on a newline. which I don't want.heres my code snippet:-

<% @post.bids.each do |bid| %>
<p>
<%= bid.user.email %>   
<%= button_to "Offer Bid", offer_bid_post_bid_path(@post, bid), :action => "offer_bid">
</p>
<% end %>  

But with the above code the 'email' and 'offer bid' are appearing in two lines, but i want to display them as pairs, with each pair appearing on one line.

I can achieve it using a 'link_to'.
If I use 'link_to' instead of 'button_to' I'm able to achieve my idea, but not able to do it with a button_to. Why is this difference between link_to and button_to.
I want to display the 'offer bid' as a button only.
Now, How to make the button_to buttin appear on the same line as the 'email'.

Please let me know if the question's description is not clear. Thanks in advance.

Answer 1

A button_to generates a form and a div around the button. So, if you do not restrict the width of the container which is before the button, it will take 100% of the width pushing the button down.

<% @post.bids.each do |bid| %>
  <p>
    <div style="float: left; width: auto;"><%= bid.user.email %></div>   
    <%= button_to "Offer Bid", offer_bid_post_bid_path(@post, bid), :action => "offer_bid" %>
  </p>
<% end %>

Answer 2

This is not to do with rails but rather how web browser's render forms.

A button_to is just a convenient way to create a form with a non-visible field. If you want the form on the same row as the email address you'll need to put it into a container, most usually a div, set the div to float left and overflow hidden.

Answer 3

button_to renders to a form tag, so I just altered the CSS to ensure the form tag doesn't create a new line.

But to apply it only to a specific form tag then give add form_class: "myButton" see below.

In your something.html.erb

<%= button_to "Offer Bid", offer_bid_post_bid_path(@post, bid), :action => "offer_bid", form_class: "myButton">

Put this in your application.css

myButton {
    display: inline;
}