How to align multiform buttons? « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

isuk
Member

Hi,

I have three different types of buttons (text, no images) in a multiform. Previous, Next and Submit. The footer of a multiform is limited to 92% through one of the lines in the org gf style.css:
.gform_wrapper .gform_page_footer {margin:20px 0; width:92%; border-top:1px dotted #ccc; padding:16px 0 0 0}

How do I align the "Next" to be on the right side in the footer (on the same line as "Previous") and stay at that exact position on every page on any multiform (one general rule to set the postion for all forms and all pages) and how do I do the same (this time: center the button on all multipage forms) for the "Submit" button?

It would be nice if the right end of the Next button box would be right under the end of the dotted footer line (vertically aligned with it). This is a picture of how it should look like for the "Next" button: http://img862.imageshack.us/i/x000.jpg/

Tia,
isuk

Posted 13 years ago on Sunday May 1, 2011 | Permalink
Kevin Flahaut
Administrator

How about a URL to your form? I'll be happy to take a look and help you out.

Posted 13 years ago on Sunday May 1, 2011 | Permalink
isuk
Member

Link to such a multiform is: http://alturl.com/wxnym

Regards,
isuk

Posted 13 years ago on Sunday May 1, 2011 | Permalink
Kevin Flahaut
Administrator
The next button has it's own class. It's easy to apply new styles to it if you want. Try adding this to the end of your style.css file
```
[css]
body .gform_wrapper input.button.gform_next_button {float:right}
```
test screenshot: http://grab.by/a16e
Posted 13 years ago on Sunday May 1, 2011 | Permalink
isuk
Member

Works great, and how should the submit button be centered via css?

Posted 13 years ago on Sunday May 1, 2011 | Permalink
Kevin Flahaut
Administrator
Sorry, I overlooked that part. Again, basic CSS is all you need to manipulate the button placement, just target the right element like this. This doesn't exactly center it, but it's close. You can experiment with different methods from there if you want.
```
[css]
body .gform_wrapper .gform_page_footer input#gform_submit_button_1 {
	margin-left:170px
}
```
screenshot: http://grab.by/a1mx
Posted 13 years ago on Monday May 2, 2011 | Permalink