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.
