Placing Multiple Button_To on the Same Line - Ruby on Rails

GuidesWeb DesignWeb Development

This is a problem that had me confused for an embarrassingly long time. Rails wraps button_to elements within a form and a div. Unfortunately this will take up 100% of the available width. Thankfully the solution is pretty straight forward – simply wrap buttons in a div and float them left like so:

    <div style="float:left;">
       'button'%>
    </div>
    <div style="float:left;">
       'button' %>
    </div>

A wrapper div isn’t strictly necessary however I usually add one just to be safe. While this will probably give a bunch of designers another reason to hate developers, I find that wrapping floated elements seems to save a lot of headaches when making changes down the track.

Using the code above you may also find that the divs aren’t filling as expected, simply add a div with a ‘clear:both’ style to the bottom of the wrapper:

<div>
    <div style="float:left;">
       'button'%>
    </div>
    <div style="float:left;">
       'button' %>
    </div>
    <div style="clear:both;">
    </div>
</div>

Hopefully that doesn’t take anywhere near as long for you guys to figure out as it did me, time for a coffee break I think. Good luck!

6 comments

Comments from the original blog are preserved here. New comments are closed.

  1. Alain

    Thanks a lot! It works, sharing this on my blog!!

  2. Chris Owens
    In reply to Alain

    No worries Alain, thanks for the feedback.

  3. Placing Multiple Button_To on the Same Line – Ruby on Rails | What I Broke | Wildeng TechDad

    [...] Placing Multiple Button_To on the Same Line – Ruby on Rails | What I Broke. [...]

  4. trodicaro

    Awesome, I just used it too to render 5 buttons inline. Thanks!

  5. Thanks, this worked great!

  6. Thank you!