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.
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.
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/
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.
see the "23 days/43 days" section
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
Disregard that, my mistake. I figured it out. Thank you very much!
Sweet. Glad that worked for you. Thanks for the update.
