Docs

[ospahr]

Hi there,

I got a Gravity Forms problem, colums are not shown, everthing is listed below each other – no left and right half possible. (I started with this topic: https://community.theme.co/forums/topic/gravity-forms-column-issues-2/#post-1055188, but couldn’t get the solution here and was asked to open a new post) I contacted Gravity Forms support and they gave me this answer:
———————————–
I see the issue, the theme is including it’s own custom Gravity Forms stylesheet which is overriding the default styles.

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/2r601flky8pew15/Screenshot%202016-06-22%2011.44.04.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;
}
——————————-
Since I am not good with code and use the X Theme because things get a lot easier this way, I don’t know how to change the Stylesheet. Is there another possibility/code that I can copy and paste in the Custom CSS, that fixes this issue?

Thanks in advance and best regards
Isabella

[ospahr]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

body .gform_wrapper .top_label input.medium, body .gform_wrapper .top_label select.medium, body .gform_wrapper .top_label li.gfield.gf_left_half, body .gform_wrapper .top_label li.gfield.gf_right_half {
    clear: none !important;
}

Let us know how this goes!

[cvsloane]

Hello, I’m having the same issue on http://www.trustprovidence.com. I am also using the Gravity Forms Styler Plugin, which perhaps interferes with your CSS fix above. I tried adding your code above and it did not fix the issue. Can you see what the issue is?

[Rupok]

Hi @cvsloane

Kindly clarify your issue properly because “having the same issue” is a bit ambiguous. Let us know what you are trying to accomplish. A screenshot would be appreciated.

Cheers!

[ospahr]

Hi again and thanks for your quick answer, but I am afraid the code didn’t work for me?

[cvsloane]

Hi there, please check the link–I provided a live URL so you could see what it is doing and inspect the CSS directly if necessary. The form is set up to use the left half and right half short codes, but all form elements are on top of each other. Same issue as OP.

[Lely]

Hello There,

To clarify the issue, you want the label on the left and textfield on the right like this image?

If yes, add this:

ul#gform_fields_1 >li {
    width: 100% !important;
}
ul#gform_fields_1 >li >label {
    display: inline-block;
    width: 40%;
    float: left;
    margin-top: 10px;
}
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container {
    width: 51% !important;
    display: inline-block;
    float: right;
    padding: 0 !important;

}

Hope this helps.

[orangecrush]

Gravity Forms 2.0 updates have been super problematic and their support always blames everyone else. They think everyone else should fix their problems. The 2.0 upgrade left me with so many problems and their support was really bad and arrogant.

The great support team of Themeco patiently helped me and I am very grateful.

I am waiting on WPForms to add a feature I need, and as soon as they do, I will be switching. It’s works perfectly with ThemeX with no need for tons of CSS additions. I strongly urge anyone who is using Gravity Forms to try WPForms. It is modern, stylish, easy to use and plays nice with ThemeX.

[cvsloane]

Thanks Lely for that. That’s not quite it. The “Name” and “Phone” Fields should be on the same “row.” The “Email” field should be on its own row. Then, the “Message” field and “I’m interested…” fields should be in the same row. I don’t have a screenshot of it, but I hope that helps.

100% agree orangecrush. Themeco’s support is excellent, most of the time I don’t even have to ask as it’s been well-answered already. Thanks for the tip on WPForms, I’m looking to toss GF as well.

[Lely]

@orangecrush.

We’re sorry you have encountered so many issues. It is our pleasure to help. Cheers!

@cvsloane,

Please use this instead:

li#field_1_4, li#field_1_6, li#field_1_7, li#field_1_8 {
    display: inline-block !important;
    float: none;
    width: 50% !important;
}

Result:

Hope this helps.

[cvsloane]

It does Lely, thank you very much for your help!

[Jade]

You’re most welcome.

[ospahr]

Hi again,

as I wrote in my previous post on June 29 – the code did not work for me. Is there another possibility I can try?

Thanks and best regards
Isabella

[Joao]

Hi Isabella,

On my end the form is being shown just like Lely´s picture above:

http://i68.tinypic.com/161dyjl.png

If you are seeing different from this would you mind clearing your cache and testing it again?

If you are trying to achieve a different layout from that would you mind providing more detailed information about the changes you would like?

Thanks

Joao

[Author]

Posts