Overlay that slides from the side

Hello! I would be super grateful if someone can help me with this solution - I am doing a prototype of a product detail page. I’m absolutely not advanced but tried so many options and nothing helps - the solution looks buggy or doesn’t work smoothly.

What I need (DESKTOP):
Once clicking on a button, a flyout (modal, overlay) shows up from the right side (and stays sticky on the right) and covers the page like an overlay. The content of the flyout itself should be vertically scrollable. Ideally, the content of the whole page (background) shouldn’t scroll. To imagine - a similar pattern is used e.g. on amazon or wayfair once you click on the add to basket button on the detail page, you get a summary and other options in this overlay that slides and stays on the right while you can scroll it.

What worked for me for now: flyout as a dynamic panel that slides left “as a lightbox” after clicking a button. I used “pin to browser” with an option to scroll vertically. It works fine unless I change the window height (use another monitor / window size) - then I can’t scroll/reach the bottom of the overlay, so it is cut on the bottom. What am I doing wrong? Is there a way to do it smoothly for different windows sizes?

Thank you in advance.
(the screenshot demonstrates what I need, but I have more content and therefore need to enable a proper scrolling)

The basics of what you describe should work–but doesn’t. In general, the content in a dynamic panel must be taller than the panel itself in order to scroll vertically (otherwise, there is no need to scroll.) It appears to me that when a panel is pinned to the browser its height gets set to the height of its content. Not sure if this is intended by Axure, is an artifact of how the browser treats the dynamic panel when pinned, or if it is just an Axure bug. I lean to the latter as the behavior is not what you–nor I–expect.

There are a few things you can do to handle various window sizes and browser resizing. When I applied some of these, I seem to have accidentally fixed your problem. See this little demo I made for an example.

scrolling overlay from right.rp (127.6 KB)

  • All pages have same basic content.
    • There is some dummy content, a hidden “Overlay Panel” is pinned to the top-right of browser window, and a button to “Show Overlay”.
  • Page 1 shows the dynamic panel with action of “Show Overlay Panel slide left ease in out cubic 300ms treat as lightbox”
    • This fails. The dynamic panel just does not scroll, regardless of window height.
  • Page 2 has same set up, only the Window Resized event sets the height of the dynamic panel to “[[Window.height]]”
    • This works (for me, on Win10 with latest Chrome browser) as long as the content in the dynamic panel is taller than the window. It scrolls by default with a a scrollwheel.
    • If I hover over the “lightboxed area” --the shadowed main page, off the panel area–then the whole page will scroll with a scrollwheel. This is how lightboxes typically work, though. To get around this, I tried turning on the “100% Wide” option for the dynamic panel and this worked–the main page content does not scroll, as it is blocked by the dynamic panel.
    • Now, if I hover over the window’s scrollbar area, the whole page will scroll with scrollwheel–or dragging the window scrollbar. Again, totally typical.
    • Because the dynamic panel is scrollable and the page is scrollable, there are two scrollbars next to each other. Not great UX practice, but not terrible in my opinion. To hide the panel’s scrollbar, you can wrap the dynamic panel in another dynamic panel and set that “outer panel” to not scroll and decrease its width just enough to hide the scrollbar area (18px for me with Win10+Chrome). Alternatively, I suppose you could try to hide the browser window scrollbar by wrapping all the main content in a dynamic panel (keeping default option of “Never Scroll”), and when the Overlay Panel is shown, set the height of this main panel to [[Window.height]], then when Overlay Panel is hidden, set height of main panel to its content (either a background rectangle widget height or perhaps the bottom-most widget’s “bottom”, as in [[LVAR1.bottom]] where LVAR1 points to that widget.

Just to test if all this is a bug/artifact only with the lightbox option, I duplicated Page 1 to Page 3, but show the panel normally, simply bringing it to front. Same deal: main page scrolls, not the dynamic panel. I then duplicated Page 3 to Page 4, used the “Set Size” trick in the Window Resized event, and the panel scrolls. This is why I conclude the unexpected behavior is due to a pinned dynamic panel getting set to the height of that panel’s content.

Thank you SO MUCH @mbc66 for your help and time invested. The page 2 works for me, too! I wouldn’t have thought of this solution. Happy New Year and best wishes to you :blush: