Sticky and responsive

Hello,
I have a problem in making headers sticky in a way that they adjust to a screen size.
https://app.axure.cloud/app/project/zhe3pm/overview
(Sorry, don’t know how to export or copy just a one page, provided a link instead)

Link doesn’t work, and you probably don’t want to share access to your Axure Cloud files to the world.

To “export” one page, save your .rp file to a new filename, then delete all other pages, then save again.

In general, you can make a header “sticky” by creating a dynamic panel and pinning it to the browser (Look for Pin to Browser link in the STYLE panel when a dynamic panel is selected.) This will “stick” it to a fixed location, if that’s what you’re trying to do.

Note that dynamic panels also have an option for “100% Wide (browser only)”. Selecting this will make the panel fill the width of the browser window (aka, viewport.) By default, this would not be visibly apparent as dynamic panels have no fill (well, a fill of 0% opacity). You can set the fill of a dynamic panel to any color or gradient in the STYLE panel, including any level of transparency. It is important to realize the style settings apply to one state only, so if you want to set a consistent fill, you’ll need to set it for each state in your dynamic panel. For me, this is the easiest way to get and handle elements that need to be “full width” or “full height” of browser window.

In general, to automatically resize widgets based on “screen” size (actually the browser viewport dimensions) you can make use of the built-in variables, [[Window.width]] and [[Window.height]]. For example, if your header is simply one rectangle widget, you can add this action to the widget’s Loaded event: "Set Size of This to [[Window.width]] " and either set the height value to blank or [[Target.height]] so the height does not change (unless you want change height as well.) If you want to ensure a widget is always half the window width you would "Set Size of This to [[Window.width * 0.5]] " You can also handle this in the Page Loaded or Window Resized and/or Adaptive View Changed events. If you want to smoothly resize widgets as the browser window changes, then use Window Resized --this will set the size at page load as well (because I guess the window is technically resized from “undefined” to N px.) You can use this approach to move and resize individual widgets within your header, such as keeping a button on the right with 20px padding, keeping an image centered, distributing horizontal alignment of tabs, etc.

3 Likes

Here’s a link to view the project: (Uses the 6 digit project code)
https://zhe3pm.axshare.com/

Without seeing your .rp file it’s hard to tell, but it looks like you are very close.

You have your body content centred in the browser, but it looks like your sticky headers are pinned to the left and right top sides of the browser? Perhaps you want to combine the 2 sticky panels into one element and pin it to the top-centre, so that it tracks with the body content?

sorry,
i am not used this this axure cloud.
The link i want to share is this
https://zhe3pm.axshare.com/#id=ylrs84&p=scroll_