Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Engelbert Ebalo
Engelbert Ebalo
3,697 Points
Posted by Engelbert Ebalo
Engelbert Ebalo
3,697 Points

2 forms each only having a submit button, all in one line... How?

Extending what is taugh here Using Decorators in ROR

In the EDIT page, i want to show 2 different forms, both with only a submit button. Implemented with bootstrap and simple_form, the buttons are show on separate lines.

Where can i override this because I'd like to show these 2 submit buttons on the same line.

4 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Engelbert Ebalo,

It might be somewhat complex to have two forms that use the same submit button. Jason Seifer might be able to answer this a little better.

That said, if you just want 2 submit buttons on the same line, it should be as simple as adjusting the CSS that's styling them. Right now they're probably block elements, when you would want them instead to be inline elements. You can change that by selecting the element and then changing the display style to block, kind of like this:

#mySubmitButton { display: inline; }
Jason Seifer
STAFF
Jason Seifer
Treehouse Guest Teacher
Jason Seifer
Jason Seifer
Treehouse Guest Teacher

Hey Engelbert Ebalo , Nick Pettit is close about having the submit button display inline. However, rails will automatically wrap your submit buttons in a form which will display as a block. The easiest thing to do would probably be to add the following:

<%= simple_form_for @your_class, html: { class: 'form-inline' } %>

This should add the "form-inline" class to the generated form, which is bootstrap's way of adding the CSS Nick posted.

Engelbert Ebalo
Engelbert Ebalo
3,697 Points
Engelbert Ebalo
Engelbert Ebalo
3,697 Points

Thanks Nick Pettit and Jason Seifer for the reply.

I did try the display:inline for the submit button but it didn't work for me. I was speculating that it was the form that need to be inline as well.

I will try this when i get back to my computer.

thanks again!

PS. Treeshouse show suggestion: a show dedicated to all you favorite gems and css tricks that you guys have actually used on your projects. This topic can get large, maybe a multi part show :)