-
Posts
-
Hi,
We are using gravity forms in enfold to make a booking request form. The form includes some conditional logic so if 3 is selected, then three sections will drop down. sections are set to be side by side when they drop down, but they are diagonal on smaller monitors.
For example if 3 pets were selected then three pet details sections would drop down. The sections should drop side by side so there would be 2 on one line, then 1 on the line below. However, they do not align and white space is created out of know where.
Here is the link to the form page: http://217.199.187.200/broadmarshkennelsandcattery.com/booking-request/
I will include details to the back back end below so you can take a look.
Thanks.
Hi codecreative,
This is what I get on my end when selecting 3 pets: http://imgur.com/aoiK1FZ. It’s looks fine to me, what would you like to change?
Best regards,
RikardHi,
Sorry i forgot to mention that the new or existing customer selection has to be selected to new customer.
Then they drop down underneath for details to be filled in, and on smaller screens, they stagger rather than be side by side.
Thanks.
Hey!
refuse from bumping into your own thread please, because it marks it as “answered” and then we can’t provide a faster reply to you.
Use this code in Quick CSS for mobile devices:
@media only screen and (max-width: 767px) { li#field_2_3 { margin-left: -34px; } li#field_2_5 { margin-left: -34px; }}and adjust margin-left value as needed.
Hope this is what you want. Otherwise send us a mockup showing exactly what you want to achieve please.
Best regards,
AndyHi,
Sorry we won’t do that in future to get a faster response… this CSS hasn’t worked, I have a 23 inch monitor and this is what i am getting
There are large areas of white space that we do not want there when the fields drop down.
Hope you can help.
Thanks.
Hey!
not sure what you mean and don’t know what you want to achieve. Can you send us a mockup showing exactly what you are trying to achieve please? because I get a completely different look than in your screenshot:
Regards,
AndyHi!
If you read through the previous messages and looked at the screenshot we sent, you’d see that “new customer” has to be selected (not “existing customer”) and any number other than ‘1’ (e.g. ‘2’). If you did that you’d get a similar view of all the additional fields which you currently aren’t seeing.
Here is a mock up of what we want to do. On the left is what we a re currently getting, on the right is what we want. You have back end access with the details already sent to you so you can see what may be causing conflict or anything like that.
I hope you can reply with urgency as this is stopping the site going live.
Thanks.
Hi!
no, I still get a totally different look:
However, use this code to to move the fields up, as shown in your mockup:
#field_2_45, #field_2_20, #field_2_21, #field_2_22 { position: relative; top: -120px; }Best regards,
AndyHi!
Thanks! The above code worked with a few minor changes such as the px value of top. I used the same theory to do the rest of the fields.
However, one more problem has occurred because of this. When you select “new customer” and number of pets to be “6”, underneath the 6 sections that drop down, there is a large amount of white space appeared due to the -px value set. But this won’t stop the site going live.
Thanks for the help.
Hi!
glad you can go live soon.
However, there is no white space for me when choosing 6 pets:Best regards,
AndyHi!
this is caused because this code:
#field_2_49, #field_2_35, #field_2_36, #field_2_37 { top: -390px; }does not apply for the fields after the white space. Include them into the code above and they will move up too.
Cheers!
AndyHey!
no, I did not say you should remove the code, but include the other elements into this code.
Regards,
AndyHi!
Sorry we misunderstood, The code has been re-added to the quick CSS, but adding the extra elements made them mess up and move up the screen and overlapping other fields when other numbers were selected.
To fix this we have changed the layout of the form slightly, but the same theory still apply’s (select “new customer” and a number, for that number of boxes to fall down). The only issue left is the submit button with all of this white space when “new customer” and “6” is selected.
(The white space reduces, but still is there when some other numbers are selected).I have tried using this code:
#gform_submit_button_2 {
top: -390px!important;
position: relative;
}And this does work when “6” is selected
But when other selections are made on the form (e.g. “existing customer” and “2”, something like this will happen:
Notice the submit button is now at the top of the form. I’ve removed the code that I put above as it doesn’t work. I doubt that there would be a way to fix this and remove the white space from above the submit button, that will work with any selection on the form, but if there is, any help would be greatly appreciated.
Thanks.
- You must be logged in to reply to this topic.