Constraints of widgets inside dynamic panel that is 100% wide


#1

Think of a header with logo on the left side and a user avatar on the right side. I want the logo and avatar keep it’s position to 30px from the left/right edge - always.

So I’m trying to have a widget always (regardless of window width) positioned 30px from the left edge of the window. I thought this could be possible with:

  1. create a dynamic panel
  2. set dynamic panel as 100% wide
  3. place a widget inside the panel
  4. position the widget 30px from the left edge of the panel
  5. set widget’s constraints to left.

In that scenario, I would expect the widget stay always positioned 30px from the left edge of the panel eventhough the panel would stretch to 100% window width. Sadly, that’s not the case.

Is there another approach to achieve what I’m trying to achieve?

Important note: ideally, the solution should allows for making it (the set of widgets) a component. Again, think of a header with logo on the left and avatar on the right, reused on more pages.

Thnx


#2

The setup you describe should work fine, as long as your page style is set to left-align. If it is set to the default center-align, it will try to center everything, including widgets in dynamic panels set to 100% wide. For this and similar reasons, I usually set page style to left-align in my prototypes.

I played around a bit and found it works–widget remains as you place it–when the dynamic panel is set to 100% wide and pinned to browser.

If a pinned dynamic panel (dp) or left-aligned page style won’t work for you, here is a workaround.

  • Uncheck 100% wide option
  • Add a Resized event to the dpwith a Move action to position your widgets. (Keep in mind all coordinates of widgets within a dp are relative to that dp, and if you leave a coordinate blank the widget will not move in that direction. E.g., to keep a widget named “MyLogo” at 30px to right of dp’s left edge, use Move MyLogo to (30, )
  • Add a Window Resized event to the page (make sure no widgets are selected by clicking blank page area, then go to the INTERACTIONS pane) that sizes the dp to match the window’s width:
    Set Size
    MyDP to [[Window.width]]w x Heighth anchor top
    // so not changing height of MyDP. This event gets triggered on page load as well.

To make it a Master (Component in Axure 10) you can keep the Resized event on the dp. You’ll need to redo the page event, which you can cut from the page and paste into the Master (with no widgets selected) --just re-target your dp and the code should be retained.