[orangecrushParticipant]

Anything?

[LelyModerator]

Hi There,

I’ve tested the quantity CSS code on different browser and it’s seems to work fine. See attached screenshot. Would you mind giving us the OS and browser version you were using.

For the label text on mobile that is going down, please try this CSS:

@media (max-width: 480px){
body .gform_wrapper .gfield_radio li label, body .gform_wrapper .gfield_checkbox li label {
    display: initial !important;
}
}

It is going down because by default it display as block. It’s like a box. Then on smaller devices, this text block and radio button container width is not enough to display both of this element in one line. Above CSS will disable the block. See screenshot for result.

Hope this helps.

[orangecrushParticipant]

Thanks Lely. I appreciate it.

I will try it again. It’s on the latest Mac OS with Safari. I can’t check right now.

What about the two halfs columns not working?

[LelyModerator]

Hi There,

You’re welcome!
Unfortunately, as of the moment, I can’t access your site. See attached screenshot of the error.

[orangecrushParticipant]

Sorry, you tried at the exact wrong 30 seconds! 🙂 It’s good now!

[orangecrushParticipant]

The code you gave for the Quantity (text input) fields does work in Chrome and FF but not in Safari Version 9.1.1 (11601.6.17), EL Capitan.

[ChristianModerator]

Glad it’s sorted out. 😉

[orangecrushParticipant]

No, it’s not sorted out yet! 🙂

[orangecrushParticipant]

Just received this from Gravity Forms support:

Jun 22, 10:14am
Hi Bill,

I’m afraid the issue with the CSS Ready Classes is being caused by the theme which is including it’s own custom Gravity Forms stylesheet which is overriding the default styles:

http://www.getfreshcarpetcleaning.ca/wp-content/themes/x/framework/css/dist/site/gravity_forms/ethos.css?ver=4.5.2

Gravity Forms 2.0 does include a lot of style changes so the theme developer would need to update their custom stylesheet so it is compatible with those changes.

This rule inparticular is causing the layout issue with fields using the gf_left_half and gf_right_half classes: https://www.dropbox.com/s/t6zbkwoi5fddkw8/Screenshot%202016-06-22%2015.13.13.png?dl=0

They are setting the float rule to left, Gravity Forms no longer uses floats as they are bad for responsive design.

You’ll need to contact the theme developer to see if they have an updated version of the theme compatible with the new version of Gravity Forms.

In the meantime adding the following to the theme stylesheet should temporarily fix the issue:

body .gform_wrapper .top_label li.gfield.gf_left_half {
float: none;
}

Regards,

__________________________________________

Gravity Forms Support Specialist
http://www.gravityforms.com

[orangecrushParticipant]

So, the columns now work with the solution above. However, if I could still get help with the text input fields that works with Safari, that would very very much appreciated.

My CSS for Gravity Forms is becoming huge. I sure hope Themeco updates their GF support in the future.

[RadModerator]

Hi there,

WHat’s the issue with form in safari? I checked and it’s okay. Perhaps you’re referring to option and label alignment? If yes, then please add this CSS as well,

_::-webkit-:not(:root:root), body .gform_wrapper.gf_browser_chrome .gfield_checkbox li label, body .gform_wrapper.gf_browser_chrome .gfield_radio li label, body .gform_wrapper.gf_browser_safari .gfield_checkbox li label, body .gform_wrapper.gf_browser_safari .gfield_radio li label {
margin-top: -7px;
}

Thanks!

[orangecrushParticipant]

Thanks Rad. That was a nice tweak!

To summarize, the problem I would still like to fix is the height of the price quantity fields on Desktop (they are really tall) and also the final name, address, input fields. See first pic.

A previous code given here:

body .gform_wrapper input[type=text], body .gform_wrapper input[type=url], body .gform_wrapper input[type=email], body .gform_wrapper input[type=tel], body .gform_wrapper input[type=number], body .gform_wrapper input[type=password], body .gform_wrapper select, body .gform_wrapper textarea {
height: 1.65em;
}

Worked well on Chrome and FF, but in Safari while it reduced the height you could not see the text input as it was too low down. See second pic.

The other thing I would love to clean up but it is not essential, is the final name, address, phone and email part. The input fields could be lined up better for neatness.

Almost there! All of this is just because of the upgrade to 2.0.

Thanks for all your combined help!

[RadModerator]

Hi there,

Glad it helped, but may I know from which page you’re currently having this issue? I tried finding the form but no luck. Or is there any answer combination to make it appear from the Quote page?

Thanks!

[orangecrushParticipant]

Hi Rad,

You have to select the top left field all the way down the first page to get to the services pages. Then you will see three options. Select any one of those and then you see all the services with quality fields.

Keep going and you will get to the final name and address section.

Thanks again.

[RadModerator]

Hi there,

There was typo error and should be “I tried” and not “I’m tried”, corrected. Just anxious to send different meaning haha.

Back to the topic, please add this CSS as well,

_::-webkit-:not(:root:root), .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
    padding: 0 0.65em;
}

I can’t get into next step after quantities, it just keeps loading. And has this errors,

www.getfreshcarpetcleaning.ca/:10 Uncaught ReferenceError: jQuery is not defined
www.getfreshcarpetcleaning.ca/:292 Uncaught ReferenceError: gform is not defined
www.getfreshcarpetcleaning.ca/:10 Uncaught ReferenceError: jQuery is not defined
www.getfreshcarpetcleaning.ca/:292 Uncaught ReferenceError: gform is not defined
VM556:10 Uncaught ReferenceError: jQuery is not defined(anonymous function) @ VM556:10
VM557:292 Uncaught ReferenceError: gform is not defined

Is it working before, please undo the last change you made before prior to this error.

Thanks!

[Author]

Posts