Gravity Support Forums Topic: Textarea will make extra space in layout

Gravity Support Forums Topic: Textarea will make extra space in layout https://legacy.forums.gravityhelp.com/topic/textarea-will-make-extra-space-in-layout Gravity Support Forums Topic: Textarea will make extra space in layout en-US Mon, 20 Apr 2026 04:52:54 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php WebbPlatsen on "Textarea will make extra space in layout" https://legacy.forums.gravityhelp.com/topic/textarea-will-make-extra-space-in-layout#post-53709 Wed, 28 Mar 2012 16:56:14 +0000 WebbPlatsen 53709@https://legacy.forums.gravityhelp.com/ > 1. How to place Submit button in the third column? I "solved" this with alignment for the gform_footer div. <code>.gform_footer { text-align:right; }</code> Is it possible to place the submit button wherever you want? WebbPlatsen on "Textarea will make extra space in layout" https://legacy.forums.gravityhelp.com/topic/textarea-will-make-extra-space-in-layout#post-53552 Tue, 27 Mar 2012 07:05:55 +0000 WebbPlatsen 53552@https://legacy.forums.gravityhelp.com/ This web site is not public yet and behind auth but Kevin has created the form already earlier in this thread. Rob Harrell on "Textarea will make extra space in layout" https://legacy.forums.gravityhelp.com/topic/textarea-will-make-extra-space-in-layout#post-53468 Mon, 26 Mar 2012 14:05:13 +0000 Rob Harrell 53468@https://legacy.forums.gravityhelp.com/ Do you have a link to your form? WebbPlatsen on "Textarea will make extra space in layout" https://legacy.forums.gravityhelp.com/topic/textarea-will-make-extra-space-in-layout#post-53464 Mon, 26 Mar 2012 13:51:27 +0000 WebbPlatsen 53464@https://legacy.forums.gravityhelp.com/ Thanks for your fast and workable answer and sorry for my delay. This works and your XML saved this situation. One little issue is that I lost most of my css mods but I have almost resolved that too. Two more things, 1. How to place Submit button in the third column? 2. How to set a red border on a required field after Submit if not fulfilled? Kevin Flahaut on "Textarea will make extra space in layout" https://legacy.forums.gravityhelp.com/topic/textarea-will-make-extra-space-in-layout#post-52634 Thu, 15 Mar 2012 23:27:50 +0000 Kevin Flahaut 52634@https://legacy.forums.gravityhelp.com/ Yep, the Ready Classes float the content and if the elements are different sizes, you end up with a staggered effect. That's just how floats work. That said, the Ready Classes probably aren't the best choice for what you're trying to do.. oh wait, I think Rob already said that.. smart fellow that Rob. To pull this off the way you want, you'll need to use the HTML blocks to add markup to your form. What you want to do is close the main list structure in places and introduce div "wrappers" that you can float into columns. It sounds difficult at first, but it's pretty easy.. you'll end up adding 4 HTML blocks to your form. (remember to check the "disable default margins" option on each for this). Here we go. <pre><code></li> </ul> <div id="gf_content_col_1" class="gf_faux_col"> <ul class="gform_fields top_label"></code></pre> put content for first/left div here <pre><code></li> </ul> </div> <div id="gf_content_col_2" class="gf_faux_col"> <ul class="gform_fields top_label"></code></pre> put content for second/middle div here <pre><code></li> </ul> </div> <div id="gf_content_col_3" class="gf_faux_col"> <ul class="gform_fields top_label"></code></pre> put content for third/right div here <pre><code> <style type="text/css"> div#gf_content_col_1.gf_faux_col, div#gf_content_col_2.gf_faux_col, div#gf_content_col_3.gf_faux_col { width: 29%; float:left; } div#gf_content_col_1.gf_faux_col, div#gf_content_col_2.gf_faux_col { margin-right: 3% } div#gf_content_col_3.gf_faux_col { clear:right; } /* resize the inputs in the columns */ div.gf_faux_col input.medium, div.gf_faux_col input.large, div.gf_faux_col textarea { width:96% !important } </style> </li> </ul> </div></code></pre> Here's the result screenshot: <a href="http://bit.ly/AgLQMO" rel="nofollow">http://bit.ly/AgLQMO</a> screenshot (validation): <a href="http://bit.ly/xC6nvr" rel="nofollow">http://bit.ly/xC6nvr</a> Any you can download my test form to play with here.. Download test form XML: <a href="http://dl.dropbox.com/u/688846/gravityhelp/gravityforms-columntest-2012-03-16.xml.zip" rel="nofollow">Form (zip file)</a> That should have you well on your way. Have fun with it. Rob Harrell on "Textarea will make extra space in layout" https://legacy.forums.gravityhelp.com/topic/textarea-will-make-extra-space-in-layout#post-52624 Thu, 15 Mar 2012 22:12:18 +0000 Rob Harrell 52624@https://legacy.forums.gravityhelp.com/ Hmm, this is possible to do, however, I"m not sure the ready classes would solve for it. I did this form styling for a client of mine: ubikuos.com/contactanos So I think to achieve this, might need to do some manual CSS labor - but it can be done. WebbPlatsen on "Textarea will make extra space in layout" https://legacy.forums.gravityhelp.com/topic/textarea-will-make-extra-space-in-layout#post-52617 Thu, 15 Mar 2012 18:51:12 +0000 WebbPlatsen 52617@https://legacy.forums.gravityhelp.com/ I'm trying to create a 3 cols layout with gf_left_third/gf_middle_third/gf_right_third and this works fins as long as I use input fields but when I add a textarea there will be a big space. Screenshot will describe it better, <a href="http://jarvens.com/wp-content/uploads/2012/03/gf_cols.png" rel="nofollow">http://jarvens.com/wp-content/uploads/2012/03/gf_cols.png</a> I want "Contact person", "Phone" etc just below "Company" field. It's this possible to do? I have played around but I dont get it.