Just wondering if anyone knows a workaround for designing within a lightbox which is to be used with “scroll” overflow content.
The contents inside the lightbox are supposed to extend way past the viewport size with sticky content. That works within a full sized viewport (see image)
While this normally works with a standard page, a lightbox does not seem to scroll (even with the “scroll” option selected).
Cheers in advance for those who took the time to read.
*Also tried adding all 5 containers within a larger parent container so the elements are actually counted as a single one (that seems to have the same unsuccessful results however). Tried both using grids and without grids with top margins within that container.
I think i may have figured it out:
Containing all the elements within a parent container works. What I did wrong earlier and did not work that time was to set the lightbox height to the total of all containers 4 x 70 + 30 = 310vh.
This time, I set the lightbox height to 100vh, so there’s actually content overflowing within it.
Seems to be working fine, except the last container which scrolls a little past the other ones despite having the same “pinned” position offset. I’m solving this by having an additional container that goes past all other ones (this suits my web design, u may need to research a little further if u don’t want a 5th container)
Posting a picture for what was changed in comparison to earlier, in case it helps anyone who is going through same issues.
Glad you found the answer and that it is working for you. Will try testing it to see if it works for me too.
Alrighty, was able to finish the final page on my end on all breakpoints. The Pinned position works as per normal.
One thingo to note when designing something like this: You’ll need to design the parent container on a new standard page to end and can copy-paste it in the lightbox. (I found it impossible to design within a lightbox)
