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.

Conditional fields side by side

  1. I am running into some issues here. I currently have a form that I would like to style in the following way:

    I have two options for my users to select and depending on which one they select a set of conditional fields will show up.

    I would like to style the conditional fields to show up side by side with different backgrounds and fonts in order to keep it clean and short.

    I've been experimenting with the css on the fields to no avail.

    Any suggestions will be greatly appreciated.

    Posted 8 years ago on Monday September 26, 2011 | Permalink
  2. If you're using conditional logic to show/hide groups of fields that you've floated using the Ready Classes, you're probably going to run into issues. The classes are intended to be used in conjunction with each other right half/left half, etc. If you hide one of those, the following content could potentially float up into that space where you don't want it to.

    It's going to be difficult for me to give you much more help without seeing your form. If you're running into an issue like I described above, you might try adding a blank HTML block just below the fields you're showing conditionally to "clear" any floated elements.

    If you want to share a URL to your form page, I'll be happy to take a look and see if I can offer some suggestions.

    Posted 8 years ago on Monday September 26, 2011 | Permalink
  3. Thank you for your response. I reset the form yo its original style as I wasn't getting far with whatever I had going.

    Here is an idea of what I am going for (width the fields side by side):
    http://nuimagemedical.com/images/form_mock.jpg

    Here's the link to the form:
    http://nuimagemedical.com/form-test/

    Posted 8 years ago on Monday September 26, 2011 | Permalink
  4. Okay, it's kind of difficult to test when you've reverted the form but I copied your form and if I understand correctly, have quickly replicated the layout I think you're looking for.

    All you should need to do is add the "gf_list_inline" ready class to your field in the admin and the list items will align horizontally. I styled the list items differently in this example just so you can see them change easily.

    http://bit.ly/qJ4W0a

    see the "23 days/43 days" section

    Posted 8 years ago on Monday September 26, 2011 | Permalink
  5. Thank you for your response. I added the class to the field, and it still shows the same. Is there a missing step? I see the the class in the form.css, but for some reason the fields are still showing up vertically (as you can see here: http://nuimagemedical.com/form-test/).

    Thank you

    Posted 8 years ago on Tuesday September 27, 2011 | Permalink
  6. Disregard that, my mistake. I figured it out. Thank you very much!

    Posted 8 years ago on Tuesday September 27, 2011 | Permalink
  7. Sweet. Glad that worked for you. Thanks for the update.

    Posted 8 years ago on Tuesday September 27, 2011 | Permalink

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