I need help with dynamic hidden panels in preview mode

I cant click on certain buttons that are behind hidden panels.

If you look at my first screenshot, you’ll see that its a screenshot of my prototype in axure. It has green box with a grey box. The grey one is interactive and has two other boxes beneath it. I made this by making these two beneath it to toggle slide down upon clicking on grey one. Then i converted them to dynamic panels because i want a have a scroll button

If you look at my second and third screenshots you’ll see how they look in a preview mode

I also made green button to turn black upon mouse over.

Now when i put my dynamic hidden panel over that green button

The mouse over simply doesnt work. Nor do clicking or any kind of selecting.

Is there a way around this?

Put it in front of the dynamic panel. Panels block anything behind them like other widgets do unless they’re hidden. And not that “hidden” and “empty” are not the same. Just because a panel is empty and looks transparent, it will still block. This is necessary because it can still have OnClick actions so it has intercept clicks.

Either hide the panel, move it, or put the green button in front of the panel.

If the green button is in front of the dynamic panel when you click on dynamic panel it unfolds all scroll content under the button. Its useless because dynamic panel has buttons. And they are now blocked by the green one.

What do you mean by hiding? I know a hide option under style checkbox and also the one that hides objects in outline page. But if you hide it that way, dynamic panel wont appear when button is clicked.

Hide means either via the style menu or a Hide Widget action. What is it you’re trying to do? Because if the button is being the panel it will not be clickable, so you need to find another way to accomplish what you want. It’s probably very possible, but I’m not clear on what you intended interaction is.

In this case, you can select the “Bring to front” checkbox in the Show action for your dynamic panel. Or, you can keep the dynamic panel in front but hidden by default. When it is hidden it should not block any actions for the green box. If it does, then you might have a bug in your .rp file. Submit it to support@axure.com and attach your .rp file and they may be able to address it.

I’ve created a quick demo based on your description and screenshots. This shows how a hidden widget does not block interactions of widgets underneath it, and also demonstrates how to dynamically show and hide widgets using the Show/Hide actions. If this is not what you’re trying to accomplish, it would help greatly if you could reply and attach your .rp file here.

DP hidden.rp (75.2 KB)

The Home page has a gray box, a green box and a hidden dynamic panel (dp) with two gray boxes. I’ve put numbers on them and named them to easily distinguish everything. Clicking on the green “1” box will show the dp (sliding it down and bringing to front), clicking on the gray “2” box will toggle the visibility of the dp (also bringing it to front). The dp has two gray boxes, “3” and “4” and can be scrolled. Clicking either “3” or “4” will hide the dynamic panel and send it to back. In this case, sending to back isn’t really required, but it demonstrates how you can control the “z-stack” arrangement order of widgets, just in case.

I also took it as a challenge to trigger actions like hovering and clicking on the green box even though it is behind the visible dp. See Page 1 for a demonstration of this. The green “1” box is always kept behind the dp. Note that it is directly clickable when the dp is hidden. When the dp is shown, it uses the OnMouseMove event to test if the cursor is over the area of the “1” box, and if so, select it. The Selected style matches the MouseOver style so this makes it behave like the “1” box is responding to a mouseover event. The dp’s OnClick event tests if the cursor is over the “1” box, and if so, it fires the OnClick event for that “1” box. (Oh, I take that back, it fires the OnMouseDown and OnMouseUp events because the OnMouseDown changes the text of “1” to “Click!” just to better demonstrate when it is responding to “clicks”; using OnClick would work similarly.)

A great way to help diagnose this issue as well is to open your Dynamic Panel State, and change the background to a solid color. By default it’s transparent which is usually good, but it can make it hard to tell if the panel is just empty or hidden. By changing the page background of the panel state to a solid color you can see if it’s visible (but just empty) or hidden. It will also become very obvious what the panel is covering.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.