Event lightbox popup jump to page top

358330

Event lightbox popup jump to page top

Hi!
I’m using Elementor hello theme with elementor pro and noticed a bug with Eventon. If i open an event in popup lightbox, the page jumps back to top immediately. This happens on all devices. I made some research and found some solutions in your topics, but nothing worked for me. This is the CSS in theme editor:

html, body {overflow-x: hidden;}

@supports (overflow:clip) {
html, body {
overflow-x: clip !important;}}

body.evo_overflow {overflow-x: initial !important;}

This seems to do nothing. If I adding this line: html.evo_overflow {overflow-x: initial !important;}, the jumping problem ends, the screen remains at the samle place, BUT on mobile phones it is breaks the layout, the lightbox popup size is much bigger then the actual screen and overflows vertical and horizontal as well. I want to make the screen in place AND make the mobile lightbox looks good (as it is without the added css code, but jumping screen). What should i do?

BY: Attila Sotus - Jun 29,2024 AT 5:30AM - 10 months ago

- Artem Jun 30,2024 AT 3:13PM - Posted 11 months ago - #358366
  Hello,
  
  Please add this CSS code to EventON > Styles (If you don’t see any change, EventON > Scripts & Styling > turn off Write dynamic styles to header > save settings > turn on Write dynamic styles to header):
  
  html.evo_overflow { overflow-x: initial !important; }
- Attila Sotus Jul 1,2024 AT 12:50AM - Posted 11 months ago - #358396
  As I mentioned in my ticket, this resolves the jumping problem, but breaks the mobile layout, see attached image. By the way, it is working only if i add the css to theme CSS section. How could I resolve the mobile layout break problem?
- Artem Jul 1,2024 AT 7:02AM - Posted 11 months ago - #358429
  Please send us wp-admin access to your site as a private message for us to further assist your situation.
- Artem Jul 2,2024 AT 8:32AM - Posted 11 months ago - #358591
  I cannot access wp-admin:
  
  Could you check?
- Artem Jul 2,2024 AT 2:31PM - Posted 11 months ago - #358643
  It redirects me from /bejelentkezes to /wp-admin. Could you check?
- Artem Jul 3,2024 AT 5:57AM - Posted 11 months ago - #358694
  https://stiflergarden.hu/bejelentkezes/ leads to 404 and /wp-admin shows the same restricted access message.
  
  Could you remove all the added custom code?
  
  html, body {overflow-x: hidden;}
  
  @supports (overflow:clip) {
  
  html, body {
  
  overflow-x: clip !important;}}
  
  body.evo_overflow {overflow-x: initial !important;}
- Artem Jul 3,2024 AT 3:06PM - Posted 11 months ago - #358794
  Still the same:
  
  Could you please try the instructions mentioned in this documentation to make sure your issue is indeed coming from eventon.
  
  We need to figure out is it the theme or any of your third-party plugins.
- Artem Jul 5,2024 AT 5:34AM - Posted 11 months ago - #358933
  When I commented the code, your website’s width goes beyond the window:
  
  So your code fixes this issue, correct?
  
  I think that even so it fixes the issue with your website, it doesn’t fix EventON. So that’s why this kind of issue keeps happening: https://helpdeskx.s3.amazonaws.com/wp-content/uploads/2024/07/01005036/Eventon.png
- Attila Sotus Jul 5,2024 AT 5:48AM - Posted 11 months ago - #358937
  This is the whole CSS used in theme editor now:
  
  html, body {
  overflow-x: hidden;}
  
  @supports (overflow:clip) {
  html, body {
  overflow-x: clip !important;}}
  
  body.evo_overflow { overflow-x: initial !important;}
  
  /*html.evo_overflow { overflow-x: initial !important; }*/
  
  This way, the layout good, everything looks fine, but the screen jumps to page top if you open an eventon event lighbox, which is very annoying. If I comment out the last line (that you suggest as a fix), then the jumping screen problem stops, but the lightbox event layout brakes, the lightbox overflowing the device screen both direction, which is also very annoying.
  
  The question is, how can we make the lightbox to do not jump the screen to page top and also looks good without overflowing.
- Artem Jul 7,2024 AT 3:36PM - Posted 10 months ago - #359009
  It seems that you fixed this
  
  https://helpdeskx.s3.amazonaws.com/wp-content/uploads/2024/07/05053214/Screenshot-2024-07-05-at-14.31.23.jpg
  
  by simply removing the scroll bar. But EventON still takes the width of the whole page. Even the part that’s not visible.
  
  What you need to do is to find the cause of why your website overflows the window.
- Attila Sotus Jul 8,2024 AT 12:30AM - Posted 10 months ago - #359017
  Hi!
  
  You gave me a good starting point, the problem were overflowing elements indeed. I just removed the global CSS for overflow and applied it directly to elementor containers one-by-one that has some overflowing elements and the problems are fixed now. Thank you for your help, i’m closing this ticket as solved. 🙂