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.

Data fields in same row

  1. Hi,
    I need an simple guide on how to make 2 or probably 3 data fields in 1 single row rather than having them each in one row as default. Please show me how because I knew nothing about css.

    Posted 12 years ago on Sunday October 11, 2009 | Permalink
  2. I would be easiest if you could create the form then post the link along with direction on which 3 fields you want inline. That way we could look at your specific form and give you some example CSS to style everything the way you'd like.

    Posted 12 years ago on Monday October 12, 2009 | Permalink
  3. My website is still under construction. However, the form is at here: http://www.kadkahwinonline.com/tempahan/

    I want the "Lakaran Peta" & "Gambar" fields to be at the same line.

    Please help

    Posted 12 years ago on Tuesday October 13, 2009 | Permalink
  4. Thanks for the link.. I'll take a look at it and post something back here as soon as possible.

    Posted 12 years ago on Tuesday October 13, 2009 | Permalink
  5. Okay, here's a quick snippet you can add to your style sheet. I would add this to the theme style sheet, not the default forms.css in the Gravity Forms folder as this will get overwritten in future updates.

    .gform_wrapper ul#gform_fields li#field_20 {width:40%; float:left}

    This floats the containing list item for the first field so the second one can align with it.

    You can see my test here

    You can play with the width value to get it where you want it. Since the actual input field is sized as a percentage of the container, you may want to go into the GF editor and set the field size to "medium"

    Hope that helps out.

    Posted 12 years ago on Tuesday October 13, 2009 | Permalink
  6. Thanks for your reply.

    Posted 12 years ago on Tuesday October 13, 2009 | Permalink
  7. Sorry to bump an old thread, but I'm trying to do this as well, but when i put the code into my style.css page for the site theme it's not working. I found the correct li#field numbers but I must be doing something wrong.

    Here's the form. http://www.worthingtonfleet.com/credit-applications

    I'd like to get Social Security Number, Drivers LIcense & Time @ Residence all on the same line if possible. Thanks.

    Christian

    Posted 12 years ago on Wednesday March 3, 2010 | Permalink
  8. Christian,

    You can try adding this to the bottom of your theme style sheet.

    #gform_wrapper_3 #field_3_6, #gform_wrapper_3 #field_3_7 {float:left; margin-right:10px!important; }

    You'll also want to go into the form editor and change the field sizes to "large" for those fields for it to look right with the new CSS rules.

    You can see my test screenshot for the result.

    I hope that helps.

    Posted 12 years ago on Wednesday March 3, 2010 | Permalink
  9. Thanks Kevin. By the way, these forms kick ass. I've been using Cforms forever now, and I like gravity forms so much more.

    Posted 12 years ago on Wednesday March 3, 2010 | Permalink
  10. Christian, thanks for the note. I'm really glad your loving the forms.

    You can try adding this to the bottom of your theme style sheet.

    #gform_wrapper_3 #field_3_6, #gform_wrapper_3 #field_3_7 {float:left; margin-right:10px!important; }

    You'll also want to go into the form editor and change the field sizes to "large" for those fields (maybe "medium" for the third one) for it to look right with the new CSS rules.

    You can see my test screenshot for the result.

    I hope that helps. Let us know if you need anything else.

    Posted 12 years ago on Wednesday March 3, 2010 | Permalink
  11. Thanks, that works great. I'll duplicate that and replace the field numbers for the others that I want to line up.

    Posted 12 years ago on Wednesday March 3, 2010 | Permalink
  12. Great. That's what we like to hear. Thanks for the update.

    Posted 12 years ago on Wednesday March 3, 2010 | Permalink
  13. DannyH
    Member

    HI,

    I would like something similar and was wondering if you had time Kevin you could help me out too?

    Here is the link to the form:
    http://www.war-inglorious.eu/application-form/

    Here is a link to an image showing what fields I want next to each other.
    http://img94.imageshack.us/img94/3126/applicationj.jpg

    Any help would be appreciated!

    Thanks
    Danny

    Posted 12 years ago on Thursday March 25, 2010 | Permalink
  14. Hey Danny,

    I grabbed your form markup and spent a couple of minutes making some CSS tweaks to get you started. Basically, you float some of the < li> elements (the ones you want on the left) and then you'll see that I set a height value on the upper list items so you didn't get a "jagged float" with different sized elements hanging on each other.

    I had to reset the input/select width percentages on this form so everything would look like your example image.

    Here's the CSS.. you can append it to the bottom of your theme style sheet.

    #gform_wrapper_2.gform_wrapper .top_label input.medium, #gform_wrapper_2.gform_wrapper .top_label select.medium {width:90%;}
    
    #gform_wrapper_2.gform_wrapper .top_label #field_2_30 input.medium, #gform_wrapper_2.gform_wrapper .top_label #field_2_30 select.medium {width:45%!important;}
    
    #field_2_3, #field_2_5, #field_2_6, #field_2_8, #field_2_24, #field_2_28, #field_2_31, #field_2_33, #field_2_35 {float:left;}
    
    #field_2_3, #field_2_4, #field_2_5, #field_2_10, #field_2_6, #field_2_7, #field_2_8, #field_2_9, #field_2_24, #field_2_26, #field_2_28, #field_2_39, #field_2_31, #field_2_32, #field_2_33, #field_2_34, #field_2_35, #field_2_36 {width:50%;}
    
    #field_2_3, #field_2_4, #field_2_5, #field_2_10, #field_2_6, #field_2_7, #field_2_8, #field_2_9, #field_2_24, #field_2_26, #field_2_28, #field_2_29, #field_2_31, #field_2_32, #field_2_30 {height:75px;}

    And here's my test page. It worked fine in several browsers I checked but you may need to tweak it here and there.

    Posted 12 years ago on Thursday March 25, 2010 | Permalink
  15. DannyH
    Member

    Awesome, that worked a treat!

    Thanks Kevin!

    Also this plugin is simply amazing, great work.

    Posted 12 years ago on Thursday March 25, 2010 | Permalink

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