Arranging "Keep in front" and "Bring to front"

So I have these 2 widgets that aren’t layered properly

  1. Top bar: a dynamic panel that is “Pin to browser” / “Keep in front”

  2. Right panel:

  • hidden widget
  • on OnClick of a button on the page, widget toggles visibility.

However, the right panel appears under the topbar, even when “Bring to front” option is clicked.

How do I keep the right panel layered over the topbar in this scenario?

Thanks in advance.

Hi could you attach the file ? It could be more than one thing happening there.
BR Charles

Update:

I turned the right panel into a dynamic panel, and it DOES go on top of the topbar.
But the animation is off (it loads the right panel in position, rather than slide to left).

When I turn right panel into normal widget, the goes under the topbar again.

test.rp (51.8 KB)

hi all, anyone can help out? :slight_smile:

I would suggest that the Keep in Front is blocking the bring to front… Is there any reason you need the pinned top header to be set to Keep in Front? If you turn that checkbox off, it appears to work as (I think) you want…
Michael

Hi Emgee thanks.

But unclicking the “Keep in Front” on the top header will make the page’s body content to go above the header when the page scrolls.

I attached a new sample file to demonstrate this. test.rp (58.3 KB)

Hi, I would not recommend to overlap blocks (esp. Axure doesn’t like it) with pin to browser feature, which could but from my experience not always work cross browser. Anyway in Safari first from your example is working fine include animation fx…
Charles

It doesn’t work on Safari either. I tested it on Chrome, Safari and Firefox and had the same results.

This is basically similar to a banner pinned to top with a left or right navigation that open and close.

So what do we do if we want to do that? Because that is a pretty basic and common design pattern.

Hi arjay!

As Emgee mentioned, it isn’t possible to bring a widget in front of a dynamic panel that is pinned with the “Keep in front” option. What will help in this case is to un-group the right panel and convert it into a dynamic panel instead. With this widget as a DP, pin it to the browser, similar to the top panel with the “Keep in front” option selected. When toggling the visibility of this DP, it will go on top of the top panel, but you can keep the top panel in front of other widgets when scrolling.

Hopefully this helps a bit!

test_EDIT.rp (59.7 KB)

Hi Jane, thanks. That partially worked.

Is there a way to unpin the horizontal while keeping the vertical pin to top?

Pinning a dynamic panel to the right requires me to create adaptive adaptive views,
otherwise, that panel is completely out of horizontal alignment.

I think those options under “horizontal pin” should be checkboxes instead of radio buttons.

Hi arjay,

There isn’t a way to un-pin a dynamic panel through an interaction, but I’ll go ahead and file this as a feature request with our designated teams on your behalf.

And what may actually be a better solution is to un-check the “Keep in front (browser only)” checkbox for both the top and right DPs, but reorder the z-index of these widgets on the page so that the top dynamic panel is always in front of other widgets. You can do this by dragging the top dynamic panel in the Outline pane to the very top (top means they are the last widgets to be added, i.e. at the top of the z-index).

Hopefully this gets you closer to what you’re looking for!

test_EDIT2.rp (59.8 KB)

1 Like

Yes that solution worked best. :slight_smile:

Thank you Jane.