Full bleed bars and page sections?

What method do people use to make a bar or an expandable drawer have a full bleed to the width of the browser? Or for headers & footers.

Obviously, I can use a dynamic panel with 100% width - but this means that all sections with full bleed have to be dyn panels that live on the root page - i.e. none of them can be nested in other dynamic panels or panel states. So if I have a header that changes state but is full bleed in all states then I have to manage objects living outside the header which is cumbersome and makes stacking of objects on the page hard when everything is hidden.

I get that it is by design that nesting a dyn panel inside another dyn panel means that the nested one is cropped to the size of the parent panel, but it would be nice if we could still group items together in a panel state but still allow full bleed - maybe a new checkbox setting? Hope my ask is clear here. let me know if I need to create an example. thanks

1 Like

Honestly, what I do simply because it’s fastest is pick a few key sizes to design to and make my browser that size when presenting it. I don’t bother trying to make fully fluid designs in Axure because it’s too much effort for the benefit.

thanks for your reply :slight_smile:

I was hoping someone wouldn’t say that. Fluid prototypes are getting more important for me - the adaptive views of axure is cumbersome to use for really responsive prototypes. but fluidity would be nice if there were easy ways to achieve this.

You can’t always determine what res people view your prototype in and without 100% wide it affects the design perception…

If you’re using Axure RP 8, you could take advantage of the “Set Size” action to dynamically set your non-DP widgets to be 100% browser-wide. To do this, set their widths to [[Window.width]] under the OnWindowResize page event.

I hope this helps!

Thanks -

When I did what you said, it didn’t seem to go full width - I also had to move the element too - but what was weird was that I had to move it in a positive direction not negative?

In my example here I have a normal header that is a dynamic panel at full width - then I have another hidden panel which I show on click (as if it was a full width drawer), and then inside that panel when it is shown I set a rectangle in it to Window.width and then move it… it is a bit cumbersome and also this doesn’t work if you resize your browser.

Could you please look at this RP file and see if that is how you meant it? or have any suggestions (assuming I wanted the topbar and bot bar and background to be full width…? thanks!

test full width.rp (54.4 KB)

The “topbar” rectangle wasn’t appearing at full browser width by default because the page’s content is set to center-aligned. On a center-aligned page, X==0 somewhere in the middle of the browser window, wherever the left edge of the page content falls. So even though the rectangle’s size was being set correctly, its left edge was still falling at the X value it was set to on the Axure RP canvas. That’s why you had to move the “topbar” rectangle to the left via the “Panel - header” DP’s X value. (Note: Because 100% wide DPs are resized after the page content loads, this X value actually is negative, though that’s not readily apparent.) I apologize for overlooking this before–I had just done a quick test with a default-styled page (left-aligned).

As for resizing the rectangle as the browser resizes, you’ll need to place the “Set Size” and “Move” actions in an OnWindowResize case. Currently, these actions in this file only appear under the “Panel - header” DP’s OnClick event, so they only fire once.

All of this may be moot, though. I realize now that I had misread your initial post. I thought you were looking to avoid the nested DP cropping that results from a current known bug with center- and right-pinned parent DPs. If the parent-level DP isn’t center- or right-pinned, you actually can nest 100% wide DPs inside it. As long as the parent DP is 100% wide as well, the child DPs will display as 100% browser-wide.

Take a look at the attached file for examples of both of these approaches and let me know if you have any questions.
test full width_EDIT.rp (78.7 KB)

Thanks! I really appreciate the clarification!

Hi Anthony,

Thanks for your direction here. You make it seem so simple.