Aligning options next to each other « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

robkhoo
Member

By the way...Am in love with the plugin, certainly one of the best I have ever used on wordpress.

I'd like to be able to condense my forms at times to save space. What I men more specifically is being able to align some options next to each other without having to have everything stacked.

On this form I have made it would be great to have the "Salary / Renumeration" option in line with the "Location" option instead of one on top of each other.

On the same form I would love to have the "required Japanese" and "required English Level" drop downs next to each other also.

If you guys could point a very grateful and hard working guy like myself in the right direction I would be very thankful indeed.
http://nagoya-info.com/jobs/submit-a-job/

Posted 12 years ago on Monday September 12, 2011 | Permalink
Kevin Flahaut
Administrator

Try using the CSS Ready Classes to place the fields side by side. It's easy.. just apply the "gf_left_half" and "gf_right_half" classes to the respective fields and you should be good to go.

http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

screenshot: http://bit.ly/nseduZ

Posted 12 years ago on Monday September 12, 2011 | Permalink
robkhoo
Member

Kevin,

Thants brilliant. The only thing is i'm finding that with the single line text input boxes, the right border is being cut off the input box. Is this a matter of me adjusting some css?

Posted 12 years ago on Monday September 12, 2011 | Permalink
Kevin Flahaut
Administrator
yes, the extra left and right padding you've defined in your stylesheet ( style.css line 1778 ) is adding to the overall width of the fields and causing them to be cropped by the container. If you remove the left/right padding there, you'll see that the fields fit properly.

screenshot ( padding removed ): http://bit.ly/qQm7mR

You can either remove the horizontal padding, or target those inputs and redefine the width percentage.. trimming it down a bit.

You can try adding this to your theme stylesheet to redefine the widths
```
[css]
.gform_wrapper .top_label li.gfield.gf_left_half input,
.gform_wrapper .top_label li.gfield.gf_right_half input {
    width: 95% !important
}
```
screenshot ( new widths ): http://bit.ly/nMcKj7
Posted 12 years ago on Monday September 12, 2011 | Permalink