Bug - Button showing behind dynamic panel

I have built several dynamic panels in my designs, and I have had this problem with all of them. I have a drop-down, and when I preview it, any buttons beneath the panel show through. I have tried setting the Order state for the panel to “Bring to front” and the buttons “Push to back.”

Anyone know a solution for this?

Here is the file:
Product List Page (Detail View).rp (1.0 MB)

Based on your description and screenshot, it looks like the content in your dynamic panel is transparent. …Although that wouldn’t seem to explain why the “View Details” button appears to be in front of your dynamic panel. If you can upload your .rp file it will be easy to tell for sure and for forum users to give you a solution.

Things to try:

  • It looks like your dynamic panel might be a repeater. Add a plain white rectangle widget the full width and height of your repeater cell and send it to back.
  • Or, set the background of the dynamic panel to white. By default, dynamic panels have transparent backgrounds. Select the dynamic panel, view the STYLE tab, set the FILL color to white (#FFFFFF).

Thanks for the suggestions!

So far, I tried adding the plain white rectangle widget, and the buttons are still showing through. I also checked to see that the dynamic panel background is set to white, and it is. I attached the file -hopefully another pair of eyes will help.

Product List Page (Detail View).rp (1.0 MB)

In the file you posted, none of the "Available Items" dynamic panels (dp) are brought to front when the dp state is changed to "Product Drop down". I added a "Bring This to Front" action to the first one and it looks correct.

However, because the click event is on the dp itself, clicking anywhere on the dp will change the state. This isn’t good for the “Product Drop down” state with (eventually) lots of clickable interactions. For example, if user clicks in any of the “Quantity” fields, it sets the focus on that field, readying for user input but the dp Click or Tap event causes the dp to change state (back to State1) thus hiding the dropdown state, which is not what you want. Now, technically if you have Click or Tap event for a widget within the dp, that will override a Click or Tap event on the dp. To demonstrate this, I added Click or Tap events for the favorites stars to simply toggle their selection states. This works, but consider what happens if user tries to click on a star and misses by just a few pixels–the dropdown closes, likely causing confusion and frustration.

Try clicking the second "Available Items" button and enter a quantity. This should work better, and here are the things I did for this.

  • Removed the click event on the dp and created a click event to show/hide the droplist on the button group–inside the dp. Did this for the button groups in each dp state. This means that clicking anywhere on the dp (other than the "Available Items" group) will not immediately change dp state and prematurely close your dropdown. (Also rotated the arrowhead in the "Product Drop down" state and scroll the page if needed for better usability.)
  • Created a “Bring This to Front” action in the dp’s State Changed event. This helps ensure the “active” dp and state is not obscured by other widgets.

Due to the "repeating" nature of your droplist rows, as well as "card" items at the initial page view, the design of this page would be easier to maintain by using Repeater widgets. Takes a bit of time to learn how to use them, but is well worth it.

Product List Page (Detail View) 2.rp (1.0 MB)