Sidebar Menu - Scrolling Dynamic Panel - Inconsistent across browsers

adaptive-views
newbie-question
advanced-prototyping

#1

Hi guys,

I’m trying to make an interactive map like the one shown in the screenshot below.

I’m having difficulty getting the side panel to scroll and show all its content.
I have dual monitors with different resolutions, so when I drag this preview from one monitor to the next, it makes a big difference as to how far I can scroll down the dynamic panel and what content it ultimately shows.

It’s also really unsightly to have the scrollbars show.

Does anyone have any tips on how I can:

  • Create a sidebar with accordion dropdowns that push/pull widgets
  • Pinned to the left side of the screen and can scroll to show all content no matter what browser/resolution I am viewing it in (I’m not interested in it catering for phone resolutions, only web)

Whatever I try, either with custom dimensions or auto for the page, the amount of content I can actually view is different. Or the position of where the unsightly scrollbar shows is either at the bottom of the page or somewhere between halfway and the bottom, due to the different resolutions.

Hope this makes sense and that someone may have some advice :slight_smile:

Many thanks!


#2

Hi!

Assuming you are using [[Window.height]] to set the height of the dynamic panel, what you are experiencing is most likely a bug: Sometimes [[Window.height]] reports the wrong height for the window. I can easily duplicate this in the current version of Axure 9 in both Chrome and Safari. It doesn’t matter whether the panel is pinned or not. I’ll report this to the Axure folks.

By the way, the easiest way to hide the scrollbar is this:

  • Create a panel called outerPanel that is not scrollable and is not “fit to content”

  • Inside of it create a panel called innerPanel that is vertically scrollable

  • Add the following code to outerPanel:

    OnLoad (of outerPanel)
      Set size of (panel) innerPanel to [[This.width + 20]], [[This.height]]
    
    OnResize (of outerPanel)
      Set size of (panel) innerPanel to [[This.width + 20]], [[This.height]]
    

By making the inner panel 20 pixels wider than the outer panel, you hide its scrollbar, since that part of innerPanel is clipped by outerPanel.


#3

I must take my hat off to you and say a big thank you!

I didn’t think/know about the dynamic resizing using This.width :slight_smile:

THANK YOU.


#4

Hey @josephxbrick I’ve been trying your technique for hiding the scrollbars, but unfortunately it just pushes out the scrollbar by 20. It doesn’t seem to care that it’s lower in the Z index order of the panel above it, it still renders the scrollbars.

Any ideas mate?


#5

Hi!

One panel needs to be inside of the other, and not simply behind it in the z-order. So:

  • Create your scrolling panel (called, say, “innerPanel”), size it so that it’s smaller than its content (so it can scroll) give it a vertical scrollbar
  • Right-click it and choose “Create Dynamic Panel” (or “Convert to Dynamic Panel” in Axure 8). This will encase your scrolling panel in a new panel. Call this new panel something like “outerPanel”
  • Now right-click outerPanel and turn OFF “Fit to Content.” This will make sure that this outer panel will stay the same size when you resize the panel inside of it.
  • Add the OnLoad and OnResize code to outerPanel

Here is an example: scrollingPanel.rp (53.5 KB)


#6

Much appreciated for the demo scene.

I’m not sure if I just dragged in my inner panel into a pre created Dynamic Panel, but following your instructions and some back and forth between the test scene has proved successful.

I really am grateful @josephxbrick many thanks :slight_smile: