Best way to make Auxre create a 30,000px-tall page?

I’ve got a really tall page. About 26,000px tall, but might get up near 30,000.

Axure has a built-in canvas limit of 20,000 px tall.

I’m hoping someone can offer me a suggestion better than my current idea/ideas:

  1. Create the bottom 6,000 to 10,000 px in a big dynamic panel or two. Then move them down to the 20,000-px point on page load.

  2. Something I can’t quite picture involving an iFrame. (I don’t need any iFrame functionality, but if it were seamless, I could consider it.)

Any better ideas? I’d love to go into some Axure setting and override the 20,000 limit, if such a thing were possible.

Thanks in advance.

Hi there,

Option 1 would be the usual recommendation, to dynamically move content to the bottom coordinates of the prototype. Since there isn’t an option to increase the 20,000 limit, I’d be happy to log that in a feature request for you. Feel free to share any additional input you may have about this as well, and I can include that in this ticket. Thank you!


Thanks for the reply.

My additional input on a “feature” that allows the user to create pages greater than 20,000px tall would depend on why Axure has a 20,000px limit at all.

If the 20,000px limit is to save me, the user, from something bad, then I’d like to continue to be saved from that thing.

Why is the limit there? Is it because Axure might become sluggish? Is it because the scrollbar might get too small to use? Is it a concern that I’ll create a page that takes too long for the user’s browser to load?

Depending on the reason, that would affect whether I think Axure should always allow any height, or whether there should be an “Increase height to _____” control, or warnings for the user, etc.

Thanks again.

P.S. Option 1 has its pros and cons. But it definitely has a couple pros, so it’s not terrible.

Please resolve this issue :slight_smile:

I think something funny happened with daniellyonz’s reply.

I got a notification that he had posted “You could include a iframe or dynamic panel and push down the container onload,” but when I look at this thread it appears that he posted “Please resolve this issue.”

For my own purposes, I went with Alex’s Option 1. Even though technically I only needed to make 2 dynamic panels to fit the content of my 30,000-pixel page, I ended up making 9 or 10 dynamic panels, one for each major section of the page. That allowed me to do a couple other things somewhat easily, such as giving each section a different background color, setting each section as an anchor, etc.

There were pros and cons to the way I did it. 9 panels means I have to keep an eye on the resizing of 9 different panels on page load, but it also means that I can collapse them all to about 200 pixels tall in Axure, so I can get to specific content fairly easily (as long as I can remember which of the 9 sections it was in).

Again, pros and cons.

My page load script does 2 things:

  1. First, it resizes all of the collapsed panels to their correct height. (This is the part I have to keep an eye on when I update the content in any panel.)

  2. Second, it moves all the panels to their correct locations on the page. This, I can do automatically by setting each one to the Y coordinate of the previous panel plus the height of the previous panel.

Move panel6 to panel5.Y + panel5.Height.

I would love if I could also do some auto calculation for step 1, such as “Set height of panel5 to [height of all content in panel5] + 90” (for padding), but I don’t see a way to do that, given my other particular needs, in any way that would be easier than simply updating the “set height” code from time to time.

You could put an invisible widget in each panel that is the height it will be (after resizing) and set the height to that widget’s height. Then you can just change that widget size instead of changing your actions if you want to resize it. It could be a 10px wide, Y pixel tall hotspot or something.

you can add a first state to each section. this state includes just the section name and perhaps a background color.
you edit the content in the second panel state.

check the fit to content checkbox of each section-panel.
in the onPageLoad event you just need to set each panels panel-state to the second state and check push/pull widgets below.

no calculation, nice tidy file, easy to edit.

if the interactions between sections are limited you can even convert the sections to masters.

if the page gets complex and the section names are shown before the onPageLoad-event is fired you can finally hide the panels by default and show them in the onPageLoad-event.
Untitled.rp (66.8 KB)

Please create a fix for this so we can work with unlimited sized artboards.