Dynamic canvas size


#1

For the canvas, wonder if there is something that can be done to adjust how it does dynamic sizing.

The issue is that its often useful to work on something in the middle of the screen. However, if what you are working on is at the very edge, you cannot do this because there isn’t any extra canvas. I work around this by dragging some object onto the canvas and move it all the way to the right (or bottom) to give extra space, so i can scroll whatever i’m working on to the middle of the screen.

Do people run into this and think its an issue worth addressing? The simplest solution is probably to make the canvas size double the visible area, so you always have one full ‘screen’ of extra space to scroll around. However i suspect its the kinda thing that needs to be played with and tweaked to feel natural.

Thanks!


Shrinking B3 window causes some horizontal scrolling
#2

Yes, I’ve also wished for a more dynamic canvas size, especially for things at the bottom edge of the mockup.

I’d be happy if it just always added a temporary margin of, say 200 px to the right and the bottom of the design, so that one could at least scroll past the edges a little bit at all times.

Having something more like what Photoshop does - where the area outside the canvas can be brought into view by panning or scrolling, so that any element can be put right at the centre of your screen - would be even better.


#3

i have resisted this in the past because I don’t like seeing scrollbars when they’re not needed, but maybe I need to get over it?


#4

I’d say yes, if only because it makes it a lot easier to work on a very tall, but narrow mockup for a mobile device. You can always set the scroll bar to hide if it’s not being used, a la Safari on Mac or iOS.


#5

certainly scroll bars aren’t an issue for me, i don’t even notice them, but i get where you are coming from. The real trick is for it not to be “overly scrolly” like, say, MS Excel. You can’t default to infinite space and scroll forever away. I think Jenni’s idea of some level of fixed padding is good. My guess is 50% of visible canvas as padding to all 4 sides would let you scroll anything to the middle for easier manipulation.

here’s an example of my workaround: http://cl.ly/image/0O40470W2Z1z


#6

This is really smart. I’d try something similar myself if this feature doesn’t get implemented. Photoshop and Illustrator are both really good at this.


#7

I’ll have to remember to do this little trick - definitely helpful even if you do have to remember to move them if your design expands beyond those edges.

I also generally place the top-left corner of the overall mockup at the 60,60 mark, so there’s a little bit of white space on those sides. It’s partly a visual thing for me - not having the edges of the design bump up against the chrome or sidebars.


#8

I think it boils down to whether they are, or are not “needed” in this context. I’d argue that they are actually needed because that’s the only way to allow the user to manipulate what is “centred” in the current view.

One thing worth noting is that, with Photoshop at least, if the entire image is currently visible within the bounds of the chrome and docked panels it does not show scroll bars at all and does not let you use the “hand” to pan the image around. It is only once at least one dimension - height or width - no longer fits within the current canvas view that scroll bars appear for both directions and the “hand” can be used to pan the image around. There have been times when this annoyed me on especially large monitors, but it’s easy enough to increase the zoom level or reduce the window from maximized in order to shrink the view port and thus enable the scroll bars.


#9

A very nice example of infinite canvas is conceptboard.com. Here’s a screenshot:


It feels quite liberating to use and the omnipresent scrollbars are a minor tradeoff. Perhaps the scrollbars could also be suppressed if the viewport’s origin is at the document’s origin?


#10

I agree - I often find myself unable to place something in the centre of the workspace without dropping “dummy” objects off to one side. It’s a workaround that should not be necessary, I think.


#11

Hey all, we implemented something for this feature today and would love to get your feedback and help testing it out.

We added an extra 400px to the bottom and to the right so that you can pan around a bit. This extra space is only added once you have some content on the canvas, and is not included in fullscreen or exports.

Hopefully this addresses the pain you’ve had and you no longer have to add dummy objects. Let us know what you think!

Check it out at http://balsamiq.com/download/next/. Thanks!


B3 feature request
#12

Nice! That definitely helps!


#13

This looks great! Definitely helping with my most recent build and really speeding up the pace. Just wondering if there’s any way you can make the scroll bars invisible until you start to scroll?Similar to the ways that most modern web browsers now operate.


#14

Not until we are able to make a completely native version of the app. We tried! :smile: