Bug #14848
closedBug with Gravity Forms/Commons interaction
0%
Description
I just attempted to use Gravity Forms for the first time since it updated to the block editor and discovered an issue. When I'm editing forms, my Commons profile picture is displayed on top of the Preview and Save buttons and I am unable to do either (see attached screen shot). This initially occurred when I was using Firefox on a Mac laptop and I was able to replicate the issue on Safari.
Files
Updated by Raymond Hoh about 3 years ago
- File 2021-10-08_135619.png 2021-10-08_135619.png added
- Status changed from New to Reporter Feedback
Hi Gina, I can't seem to duplicate the problem on Firefox 93, Chrome 94, as well as a Webkit browser for Windows. I've attached a screenshot for Firefox.
Perhaps try purging your browser's cache to see if that helps? See https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache for instructions.
Updated by Gina Cherry about 3 years ago
Hi,
I have replicated the problem in Firefox, Safari, and Chrome and on two Mac computers (one laptop and one 27" desktop). Purging the cache had no effect. This is a serious issue because I am not able to update or create forms since I cannot access the Save button, which is under my profile picture.
Updated by Boone Gorges about 3 years ago
I can't reproduce this either. I've tried different combinations of specific Commons accounts and avatar settings (default avatars, local avatars, Gravatars).
Gina, by the looks of your screenshot, there's something on your page that's causing your avatar to be improperly sized. Can you confirm that this oversize avatar is only appearing on the Form edit page? Is it happening whenever you edit any GF form, or is it limited to a specific one? Can you share a URL? Is happening elsewhere in the Dashboard?
You can always work around this problem by using your browser tools to hide the avatar. Right-click the avatar and select 'Inspect' or 'Inspect Element', then enter a CSS rule along the lines of 'display: none;' for the img element. (The details differ depending on your browser, and I've attached a gif of what it looks like in Firefox.)
Updated by Gina Cherry about 3 years ago
Thanks for the work around, and good questions! I am seeing this on multiple forms on the CETLS site bmcccetls.commons.gc.edu, but I tried a form on another site (https://abiseminaralums.commons.gc.cuny.edu) and did not see the issue. I have only noticed in GF.
Updated by Boone Gorges about 3 years ago
Thanks, Gina. Do you know enough about your browser's inspector tools to investigate why the image is so tall? In the 'Computed' tab of the inspector, look for something about 'height'.
Updated by Gina Cherry about 3 years ago
Thanks, Boone. I know almost nothing about the inspector, but here's what I have been able to find under Computed:
height 75px
#wpadminbar *auto
line-height 32px
#wpadminbar *2.46154
#wpadminbar 2.46154
body 1.4em
Is that at all helpful?
Updated by Gina Cherry about 3 years ago
- File 2021-10-12_1658.png 2021-10-12_1658.png added
Update: I just saw it happen somewhere else. Different site, different context (previewing a post). I wouldn't have noticed if I hadn't been looking for it, since the large avatar doesn't affect any functionality in this context. Here's the URL: https://abiseminaralums.commons.gc.cuny.edu/?p=201&preview=true. And I attached a screen shot.
Updated by Raymond Hoh about 3 years ago
Hi Gina,
To duplicate your problem, I temporarily installed the User Switching plugin and then switched to your account and checked the Gravity Forms page on the BMCC site. I can verify that there is an issue.
Boone, the problem is our cac-bp-admin-bar-mods/admin-bar.css file is not loaded when on a Gravity Forms page.
Gravity Forms appears to have their own enqueue system for their admin pages. I couldn't figure out exactly what they are doing, so I opted for an inline CSS approach. I've added some inline CSS on production in /mu-plugins/assets/gravityforms.php so the admin bar's avatar width will be set to 24px only on a Gravity Forms page. (24px is the same width and height used in our cac-bp-admin-bar CSS.)
Boone, maybe you might want to spend five minutes to figure out why our admin bar CSS is not loading on Gravity Forms pages. If you can't find the solution, let's just stick with the inline CSS workaround.
Updated by Boone Gorges about 3 years ago
- Status changed from Reporter Feedback to Assigned
- Assignee set to Raymond Hoh
- Target version set to 1.18.21
Strange - in my tests, the admin bar CSS file is loading on GF pages. It must be something specific to Gina's account, or the CETLS website, or some combination thereof.
Ray, since your fix seems to work, let's go with it :) Thanks for continuing to investigate! (It's fine to leave as a hotfix - just make sure it's committed to the repo.)
Updated by Raymond Hoh about 3 years ago
- Category name set to WordPress Plugins
- Status changed from Assigned to Resolved
I've found out why our custom admin bar CSS was not loading when on a Gravity Forms admin page.
If you go to "Forms > Settings" in the admin dashboard, Gravity Forms has a "No Conflict" mode, which only loads assets from Gravity Forms and discards all other registered assets. This was enabled on the BMCC site. If you disable this mode, our custom admin bar CSS will load up again.
Just in case "No Conflict" mode is enabled, the hotfix will fix the large user avatar when on a GF admin page. I've committed the hotfix here: https://github.com/cuny-academic-commons/cac/commit/7ef247453be103dddc7ed262157c9f0ff6d646a4.
Going to close this one out.