PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Adding 4 Column Layout Tip

  1. Hey everyone, I've been using GF for a while now and love the product. I recently had a need for a 4 column layout and created new css ready classes to create this layout. There are already a few posts from people wanting 4 column support but I didn't see any solutions on the forums that I liked. So I figured I would share my solution here....

    Add the following to your theme's CSS file (to avoid plugin update overrides).

    /* 4 column ready class ------------------------------------------------------*/
    .gform_wrapper .top_label li.gfield.gf_one_quarter { float:left; margin-right: 4%; width: 22%; clear:right !important; }
    .gform_wrapper .top_label li.gfield.gf_quarter_last { margin-right:0; }
    .gform_wrapper .top_label li.gfield.gfield_error.gf_one_quarter { width: 18% }
    .gform_wrapper .top_label li.gfield.gf_one_quarter input.medium, .gform_wrapper .top_label li.gfield.gf_one_quarter input.large, .gform_wrapper .top_label li.gfield.gf_one_quarter select.medium, .gform_wrapper .top_label li.gfield.gf_one_quarter select.large { width: 95% }
    .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gsection, .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gsection { padding: 16px 0 8px 0 }
    .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gfield, .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gfield, .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gfield, .gform_wrapper .top_label li.gfield.gf_one_quarter+.gform_footer, .gform_wrapper .top_label li.gfield.gf_one_quarter+.gform_footer, .gform_wrapper .top_label li.gfield.gf_one_quarter+.gform_footer { clear: both }

    Then add gf_one_quarter to your fields css class name for each of the 4 columns. For the last column, enter gf_one_quarter and gf_quarter_last

    I wanted the 4 column layout to display well no matter how wide the form was displayed, so I used only % widths for the columns and the padding. I also wanted to take up as few lines of code as possible (my 4 column is 6 lines vs. GF 2 columns being 13) - so I approached the issue of the individual columns a little differently. Instead of naming each column separately (ie gf_left_third, gf_middle_third, gf_right_third) I simply name each 1/4 column "gf_one_quarter". The difference is when you add the css class for the last column, you must enter "gf_one_quarter gf_quarter_last". The "gf_quarter_last" removes the unnecessary right margin from the last column.

    I haven't tested the above code in all scenarios (and I'm definitely no css expert) but it works well for my form. If you use this, let me know if you find any display issues and I'll see if I can help refine the code.

    Posted 10 years ago on Saturday June 2, 2012 | Permalink
  2. Thanks for posting! I edited your post at the top as people should not edit the forms.css file because plugin updates will overwrite it. Custom CSS (even for the plugin) should go into the theme's stylesheet or into a place in the theme that won't get overwritten automatically.

    Posted 10 years ago on Sunday June 3, 2012 | Permalink
  3. Ah yes...absolutely - thanks Rob, it must have been late when I posted that one!

    Posted 10 years ago on Tuesday June 5, 2012 | Permalink
  4. Thanks for sharing this corradomatt! However, I'm having a problem. I added your code into my child css and added your "gf_one_quarter" to the CSS Class Name. I added "gf_one_quarter gf_quarter_last" to the CSS Class Name in my last field. It doesn't accept the changes. Any suggestions?

    Posted 10 years ago on Wednesday July 11, 2012 | Permalink
  5. @PowerMedia,

    Try typing the class names in manually rather than pasting them in the fields. Some browsers get a bit weird about pasting them in and it usually remedies the problem.

    Posted 10 years ago on Wednesday July 11, 2012 | Permalink
  6. That did the trick! Thanks for the help!!!!

    Posted 10 years ago on Wednesday July 11, 2012 | Permalink

This topic has been resolved and has been closed to new replies.