Overlay height/position to cover all content?

#1

Hi – probably a simple question with a simple answer but here goes:

I’m trying to create a custom blocking overlay for my web app that displays when the app is updating.

I’ve created a row with a dark, mostly-transparent background; I’ve set its visibility to a formula, its z-index to 999, its height to the “window height” system variable, and its position to Absolute / left=0 / top=0. Everything looks great except that if the user has scrolled down, the overlay doesn’t actually cover all of the content. Is there a way to A) change the overlay’s height to the equivalent of “the height of all content on the page,” or B) change the overlay’s position/origin to the equivalent of “the top left of the screen” (as opposed to the top left of the content)? I think either of these changes would solve my problem.

Thanks!

  • Ethan
#2

Have you tried Height = 100%
?

#3

Same issue, unfortunately.

#4

I don’t know exactly how it would apply to your app, but I was able to achieve the screen overlay effect I needed by changing all my pages to “stretch to viewport height” with “scroll disabled” on the page. Then I put in a scroll container and put all my page content inside of that. Then I put in the overlay (outside of the scroll container) at 100% height.

2 Likes
#5

Yep, I would have said the same thing as @Erin_Wagner. Also, there’s same kind of discussion in this thread: Modal window in web app Maybe those posts can additional help for you.

1 Like
#6

Thank you Erin! I made this change last night and it worked like a charm!

1 Like