Prototyping - Overlay gets hidden under a non scrolling element

I have a prototype where the headers are “Fixed position when scrolling”. On the content area below, I have a trigger that launches an overlay. The problem is that the overlay appears UNDER the headers that are fixed.

Is there a way to make overlays appear on TOP of everything else, regardles of their Scroll properties? Thanks in advance.

jc

Hi Juan Carlos,
Welcome to the Forum and thanks for taking the time to report this. We’re looking into it and will share an update here :folded_hands:

1 Like

Hi,

Align the overlay relative to the screen instead of the layer to display it on top of a fixed element

Hi Jorge,

Thanks for your help. That does make the overlay display on top, but I need it to be relative to the layer because it points to a specific part of the screen.

I solved this with a workaround. Instead of making the whole artboard scrollable, I made only the are that needs to scroll in a scrollable mask. That fixed it for me.

Thanks!
jc

So I had solved this issue with the workaround I explained earlier, but now that I upgraded to Athens my workaround stopped working.

So basically any overlay that is relative to a layer (not to a screen) and this layer is in a scrollable area, the overlay will get clipped INSIDE of the scrollable area. Unless I’m missing something this has got to be an issue for anyone prototyping any UI with popups inside of scrollable areas, no? Mostly those popups that point to a specific area of the screen, like in my example.

Any help appreciated. Thanks

Hi Juan Carlos,

I put together a quick example with a nested scrollable frame and the workaround is to set the alignment to Screen. Since you have a fixed element (the header) the overlays won’t be displayed on top of it with Layer alignment.

You don’t have to change anything but the alignment, Sketch will translate the position when you switch to Screen.

Hi Jorge. Thanks for your help, but unless I’m misunderstanding, this doesn’t fully fix the issue because if you want the overlay to POINT at a specific area of the screen, the moment that area changes placement (because of scroll) the overlay won’t be pointing at it any more if relative to screen.

If you look at the video I sent, the popup points at the “+” icon that triggers it, independent of where you scroll.

Hi Juan Carlos,

The team will look into this and display overlays always on top of any other layers, including fixed-position ones. We don’t have a defined date for releasing this fix though.

Thanks so much!
BTW, congratulations on the new release. Great updates and glad to see Sketch moving forward

1 Like