Lightbox scrolls even with correct sizes

I

Hi community!

I’m having a really weird problem with a Landing Page that opens in a Lightbox.
We have a Landing page for Germany and another for Switzerland that are exactly the same from the technical side.

We first made the german LP and worked perfectly with a JS Code that triggers automatically the Lightbox when the URL has a specific parameter. The lightbox looks as wished with the size for desktop W840 x H480. #noscrolling

We copied that Version and made the Switz version, but now the lightbox opens with a scrolling bar. Which doesn’t make sense because the sizes are the same and everything is exactly the same! I tried everything but the problem seems to persists.

Have maybe someone an idea why is this happening, and if’s so, how can be fixed? I really appreciate your time and help 🙂

Looking forward to hearing some feedback

have a nice weekend

11 replies

I

Hi there,

I’ve encountered the same problem as have others it seems from the forums.

The secret to stop this happening seems to be never to adjust any options in the ‘BORDER’ section of the editor while the entire light-box ‘Section’ is selected. Altering the border properties of the lightbox seems to be the thing that causes the scroll bars to appear and then nothing seems able remove them.

To fix a light box that already has the scroll bar problem simply add another section to the lightbox page when editing, then drag all your elements form the broken lightbox onto the new section and delete the old section that has the scroll bars.

I hope this works for you as it did for me.

I

Hi, thank you for your reply. Unfortunately that didn’t resolve our problem.
We are using a new landing page for the Lightbox in the main Landing Page. If we found the solution, I will come back here to help others. But right now seems not to work nothing that we try!

Best

Y
Badge

I have same issue on many many pages. All lightboxes have scrollbars after publishing.

R

Same problem - haven’t found an answer here.

R

This simple script removed scroll bars on IE and Firefox but not Chrome. Add it to your lightbox page:

document.body.style.overflow = ‘hidden’;

Don’t forget to use script open and close tags.

Harry_King

Interesting that unbounce are still yet to tackle this bug - it’s a couple of years old.

I

Hi guys, when we implemented this campaign we never got with a solution.
Even copying the Page several times and putting every kind of JS Codes, the scroll bar was always there.
Now I realized that the ,Convertables" Feature that offers Unbounce is for Mobile available (what wasn’t possible before).
So, it should work there…instead of using a Lightbox.

If someone find a solution, please write it here 🙂 Thank you all for your active participation in this community

Hristian
Userlevel 7
Badge +3

To all experiencing this issue…

There is a reason for the lightbox to scroll but it’s kind of hard to troubleshoot if we can’t see the page in question.

My advise would be to either provide a link to your page or email Unbounce support directly if you rather not share the page in a public forum. The support team is great and would help you find the problem.

Best,
Hristian

P.S. If you have a Google remarketing tag/pixel, these are known to add an iframe with 13px height that would essentially break most designs.

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
M
Badge

I’ve recently switched my main browser to Chrome from Firefox, and I’ve run into the lightbox scrollbar issue.

This appears to fix it for me in Chrome.

In your lightbox page, add a new Stylesheet with this as the content

body::-webkit-scrollbar { display: none; }

Remember the style and /style

HTH

Sebastien_Olivier

Thank you Mark_Weatherill

Using both the following script and the css works for me to fix this issue.
Maybe improving the css only might be a solution too.

Update : this is not a solution as those scripts remove the scroll on the landing page too 😦 asking the support team to solve our issue.

<script>document.body.style.overflow = ‘hidden’;</script>

and

<style>body::-webkit-scrollbar {display: none;}body{-ms-overflow-style: none;}</style>

Didn’t try but might work too

<style>body{overflow:hidden;-ms-overflow-style: none;}body::-webkit-scrollbar {display: none;}</style>
Sebastien_Olivier

OK the final solution is to use the following CSS on the lightbox (and not on the landing css).
Hope it helps

<style>body::-webkit-scrollbar {display: none;}body{overflow:hidden; -ms-overflow-style: none;}</style>

Reply


Terms & ConditionsCookie settings