Hi, i am new to GF and to this forum and while i am learning fast, i’ve stumbled across something that i can’t seem to get past.
I’m creating a brand new form on a new page within an existing (very old) application and i’ve created a radio button element in my form and i want the options to span 2 columns. I created the element and under Field Settings->Appearance->Custom CSS Class, i have added the ready class “gf_list_2col” (no period preceding [ as in .gf_list_2col ] needed, correct? And true enough, the layout in the editor updates immediately to reflect the change, so i’m thinking that i’m good.
Then, i click ‘Preview’ to check out the form and the styling that i specified is not there. So, i’ve researched this and i pretty well understand that there’s some CSS in my larger infrastructure that is overriding my choice in the form. What i can’t figure out is how to isolate it and fix it. I’ve read some old posts around this same general topic that seem to suggest that “display: inline” and “clear: none” might be instrumental stylings to getting this working.
So, I’ve dug into the code in the Chrome Developer dashboard, found the element in question and tried creating specific styling for that element (and it’s container with similar results) to specify these two properties. Unfortunately, that doesn’t seem to have any effect, specifying the properties listed above. I know i’m in the right place because if i specify a unique ‘color’ attribute (“color: brown” for example) that changes. I seem to be unable to trigger the desired layout change in the developer tools.
I’m just simply at a loss to determine where and how to (1) locate the css that is causing my ready class to not be used and (2) how to fix it properly. I know some css, but i’m a relative newcomer to the field generally (more of a database guy) and would appreciate some direction if someone could help me out of this pickle. My client is using GF 2.5 and i’m on the latest WP version as well.
thank you!
Hi, Jim! Is the page where you’re having this problem publicly available somewhere? If so, can you post a link to it? It sounds like you’ve found the right element, but sometimes figuring out what CSS is being applied and how to override it can be tricky. If you could post a link here, we can help you find the solution.
Unfortunately, no this is new local development that i am doing on my own machine. I could post screenshots or something of that ilk if you could tell me exactly what might be most helpful.
Unfortunately it’s pretty much impossible to troubleshoot CSS from a screenshot - I’d need to dig into the guts of the code to see what’s going on. Is the site using a custom theme, or is there somewhere I could download the theme?
For what it’s worth, display: inline and clear: none probably won’t help in this case - that class uses grid layout to put the choices in columns.
I think the best advice I can give you at this point is to inspect the element in the form preview and on the front end of the site, and compare the CSS in those two places to see what is different. I hope that helps!
Hmmmm, forgive me if this is a silly question… I am seeing the same behavior whether i look at the form in the form preview or if i look at it in the website, i would expect that the CSS would be the same in those two cases, would it not?
I would think that if i make changes to my form, save them and then click ‘Preview’, that would be following the same CSS stylings/rules as if i simply opened up my site via localhost and navigated to the page that i’m working on. Am i incorrect in thinking that?
Perhaps you are referring to viewing the CSS in the developer console while the form is still open in the editor (without pressing ‘Preview’)?
QUITE possible that i am misunderstanding something though… I DO appreciate your suggestions.
Oh, hm, I missed the detail that you aren’t seeing the choices inline in the form preview… that’s an interesting wrinkle…
When I say “Form Preview”, I mean when you’re editing a form, next to the “Update” button there is a “Preview” button and clicking that button takes you to a page that shows you how your form will look. But the form is going to look different in the preview than it does on the site, because the form preview doesn’t load any of the files from your site theme. The theme’s CSS is going to change how your form looks (in some themes, these changes can be quite drastic). If the ready class is working correctly in the editor, but not in the preview, then something quite strange is going on.
Can you send me a screenshot of the form in the editor, and another screenshot of it in the preview?
Ok, yes i was wondering whether Form Preview would use only the styling present in the form itself or whether it would inherit from the theme. Since i am getting the same results in both places, i had more or less convinced myself that the Form Preview somehow pulled in the styling from the theme itself. And i’m kinda HAPPY to be WRONG!
This website keeps saying ‘sorry, can’t upload your image’ (and these are very small images, so i don’t see why there’s trouble), so i’ve got three screenshots to send and the one that i am attaching here is the view of the form in the editor. In a subsequent post (or post(s)), i will send you a screenshot of the CSS ready class that i’m employing and the third is how it looks in Form Preview mode.
I will keep trying to upload the other two files, but i keep getting errors from your site saying they can’t upload that file right now. They are .png files and only 20kb in size and i’ve got PLENTY of upload bandwidth there really shouldn’t be an issue, any suggestions there?
Ah ha! This looks like a caching issue. In the form preview, there is a border around the radio field - that shouldn’t be there. That means that either that page isn’t loading a CSS file that it should, or, more likely, it is using an old cached version of the CSS file. It’s hard to say for sure whether the problem on the front end of the site is also a caching problem, but it might be. The first step is to just clear your browser cache, or try a different browser. If you have any caching plugins installed on your site, or if your web host provides any caching, try clearing those caches. Once you’ve cleared all those caches, the preview page should show the radio options inline, without a border around it. After that works, then see if that fixes the issue on the front end of the site.
I tried this in both Safari and Chrome, i emptied the browser cache in each and got the same result. I was curious about the border, but i thought it might be related to conditional logic. The field in the screenshot is the first view of several “pages” that will come into view based on the option selected on this page. So, there is also conditional logic on this page. Might that somehow be playing into this?
It’s probably cached on your server somewhere - you might have a caching plugin running on your site, or your web host might cache assets for you, or you might be using a service such as Cloudflare that caches assets.
Nope, none of that. I’m developing on my local machine using MAMP with a local Apache server, no Cloudflare (at least that i’m aware of) and nothing else very fancy at all. As i said earlier, I’m new at this.
I have tried this on multiple browsers, same issue. I tried creating new forms from scratch with radio buttons like i want to use with these ready classes. Same result (and same ‘sectioning’ around my control).
For lack of anything better to try, I’m considering uninstalling GF and reinstalling to see if that has any effect. Anything to consider there? My client has multiple forms that use GF, they would all be unaffected, is that right? Anything else to consider? This is very strange…
thanks!
Before you uninstall… on the form preview page, can you see what CSS files are loading? If you view the page source on the preview page, you should see something like this:
