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

Question

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!

Hi Mike. Thanks for your question. Rails makes it that way. It turns out the DIV is not the problem, the form is (at least in my testing). — Dan Rosenstark
– Dan Rosenstark, Commented Feb 11, 2009 at 2:32
Alex, yeah, there it is, it's now inline-block and that works. — Dan Rosenstark
– Dan Rosenstark, Commented Feb 11, 2009 at 2:37
It has to be in a div according to HTML: putting an <input> directly inside <form> isn't valid. — bobince
– bobince, Commented Feb 11, 2009 at 2:55
wow, doesn't that make 50% of the web incorrect? Thanks for the comments everybody. — Dan Rosenstark
– Dan Rosenstark, Commented Feb 11, 2009 at 4:18

ph0rque · Accepted Answer · 2012-02-23 21:26:40Z

14

To only affect the button_to class and its inner div:

.button_to {
  display: inline;
}

.button_to div {
  display: inline;
}

edited Feb 23, 2012 at 21:26

ph0rque

1941 silver badge11 bronze badges

answered Mar 10, 2010 at 20:18

Evandro Saroka

4905 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Rosenstark Over a year ago

That's strange, I've seen that somewhere.

BushyMark · Accepted Answer · 2009-02-11 02:37:27Z

6

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
}

answered Feb 11, 2009 at 2:37

BushyMark

3,4052 gold badges24 silver badges22 bronze badges

1 Comment

Dan Rosenstark Over a year ago

thanks, Rails gives it a class automatically, so your solution works.

alex · Accepted Answer · 2009-02-12 06:08:09Z

3

Ensure the CSS for that div is set to

display: inline;

answered Feb 12, 2009 at 6:08

alex

492k205 gold badges890 silver badges992 bronze badges

Comments

Dan Rosenstark · Accepted Answer · 2009-02-11 02:36:41Z

3

Got it from somewhere out there. Happily:

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

answered Feb 11, 2009 at 2:36

Dan Rosenstark

70k60 gold badges294 silver badges429 bronze badges

Comments

Micha · Accepted Answer · 2012-06-05 13:57:48Z

2

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;
}

answered Jun 5, 2012 at 13:57

Micha

2811 gold badge3 silver badges7 bronze badges

Comments

Mat Withers · Accepted Answer · 2009-07-23 15:15:11Z

0

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 ?

answered Jul 23, 2009 at 15:15

Mat Withers

1 Comment

Dan Rosenstark Over a year ago

yes, otherwise you affect all your divs, which is definitely a problem-waiting-to-happen...

j0k · Accepted Answer · 2012-09-05 08:31:20Z

0

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

edited Sep 5, 2012 at 8:31

j0k

22.8k28 gold badges81 silver badges90 bronze badges

answered Sep 5, 2012 at 7:27

Sriram R

3202 silver badges18 bronze badges

1 Comment

pjmorse Over a year ago

That's a good explanation of the problem, but doesn't offer a specific solution.

Collectives™ on Stack Overflow

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

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related