Include a CSS class on some containers in the plugin that adds some padding
Tie popup to a button on a page
Open popup in front-end
Current Results:
The popup appears correctly in the builder. On the front end, some of the CSS used is overridden by other CSS that seems to come out of nowhere. Also, neither the form inputs nor the links in the popup are clickable.
Expected Results:
The popup should work as designed.
Notes:
Please feel free to PM me for a login to this build.
Encountered in Chrome, Opera and Firefox on Linux Mint 21.1 and Windows 11.
Still happens when almost all plugins are turned off (only AT 2.0.1 left).
Issue also occurs in another popup tied to the “Mehr zum Thema” button on the first service card, “Terrassenbau”.
“Regenerate CSS files” in Bricks Settings > Builder doesn’t help.
No minification or caching is in use.
This issue also occurs after downgrading to Bricks 1.9 and installing a clone of the build on a different dev environment at https://palu.brandartery.de/.
The issue also still occurs after deleting the block on the left and rebuilding it from scratch.
The issue also still occurs after deleting the Bricksforge Pro Forms element and also after deactivating Bricksforge.
I inspected the code on your website and I can see that you have set an click interaction on your popup. If you remove it, you should be fine.
You can remove that interaction if you open your popup → settings → template settings → popup. This interaction leads to the strange behaviour. As soon as you click on a focusable element in your popup you reopen the popup (action ‘show’) it again which sets the focus to first focusable element.
The only interaction you need is the one on your button (in general your trigger elements) wich is applied correctly.
I hope this solved your issue!
@Tobsen Thanks so much for looking into this. The interactions on the popup were cause for bewilderment for me before. At first, the popup wouldn’t open until I enabled those interactions, but now that I removed them the popup does open and indeed works correctly. Thanks!
Also, the CSS issue is resolved. Here’s what that was happening:
We made several popups for this website. To save some time, we made one popup and then saved that as a new template - and again and so on.
When doing this, the HTML elements in the next popups have the same IDs as in the previous popups. So with the same IDs appearing 6 times in one DOM, all manner of screwery ensued.
@thomas Although I guess nobody really does what we did, this ID duplication when saving a new template from an existing one might be worth looking into for the few fringe nuts out there
