CODEWITHSUNDEEP
htmlruby-on-railsforms
Dan Rosenstark
Dan Rosenstark

Reputation: 69787

HTML Problem: form causing line break before (Rails button_to)

The button_to causes a line break before it in HTML. I have found a workaround which will work, but it's hardly ideal, because then the buttons are NOT real buttons. Is there any other way to avoid the line break before the form?

Here's the resulting HTML

<a href="/last_page">Back</a> | 
<form method="post" action="/next_page" class="button-to">
<div><input type="submit" value="Continue" /></div>
</form>

any help from the CSS side or the Rails side would really help!

Upvotes: 1

Views: 9923

Answers (7)

Sriram R
Sriram R

Reputation: 330

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

Upvotes: 0

Micha
Micha

Reputation: 281

None of these options worked for me on Rails 3.2.3 ! I found a working solution at http://www.deploymentzone.com/2011/12/07/button_to-urlhelpers-all-in-a-row/

Here it is:

/* ./app/assets/stylesheets/button_to.css.scss */

form.button_to {
    margin:0;
    padding:0;
    display:inline;
}

form.button_to div, form.button_to div input {
    display:inline;
}

Upvotes: 2

Evandro Saroka
Evandro Saroka

Reputation: 490

To only affect the button_to class and its inner div:

.button_to {
  display: inline;
}

.button_to div {
  display: inline;
}

Upvotes: 14

Mat Withers
Mat Withers

Reputation:

You still have to specify inline for the div and the form.

div {
  display: inline;
}

.button-to {
  display: inline;
}

Wouldn't it be nicer if class="button-to" was also specified in the div ? or am I missing something ?

Upvotes: 0

alex
alex

Reputation: 490637

Ensure the CSS for that div is set to

display: inline;

Upvotes: 3

BushyMark
BushyMark

Reputation: 3395

the button_to creates an HTML < form > element, which is a block element in HTML. If you give the form a class or id, you build your css selector to get the form and use:

form {
display: inline
}

Upvotes: 6

Dan Rosenstark
Dan Rosenstark

Reputation: 69787

Got it from somewhere out there. Happily:

.button-to { display:inline-block;}

Upvotes: 3

Related Questions