Resizing controls in a symbol instance


Create a symbol with a browser control, and add text controls at the top and bottom, like header/footer.
Add an instance of the symbol to a mockup.
Now at the bottom of the instance, pull it down to increase the vertical size.
Of course this is resizing the symbol, not the browser container that’s “fixed” onto the symbol. So all of the labels in the symbol expand within the control in a relative resizing. The header text pulls away from the top of the browser position, when the intent was to resize the browser control.
What if I just want the footer label to pull down with the bottom of the browser? Makes sense, no? This is all about a difference between absolute and relative positioning, and synchronization of controls within a container.

I’m hoping that we can select individual controls within a symbol group and adjust their x,y or width,height in a single operation, without affecting others. I understand the challenges here - how will it know what operation we want to perform? Hey, that’s your problem. :laughing: Seriously though, this comes back to other notes I just posted about making broad changes. In this case I’m talking about only changing the height of the browser control as a customization on the symbol instance, and then changing the y location of other selected (ungrouped) controls within that instance.

And in general this is just another variation of a theme - the ability to make a number of property changes to controls within a symbol instance, without permanently ungrouping or disconnecting from the base symbol definition. Per another note I posted today, if the symbol is updated, none of these instance-specific properties should change. Though of course there should be a way to change all instances, and then (ideally) let us know if something breaks in the process. In this case, resizing the height of the browser in the symbol is contrary to the specific property setting in an instance in a mockup - we should be informed when that happens.



You’re not the first one to ask about this, @TonyG, so I’ve added your vote for this one. This affects symbols, groups and even multiple controls you’re trying to resize.

We’ll try to improve this in the future, thanks for sharing your thoughts about it!


I like this idea (and understand how complex it would be to develop).

I have a related idea that would solve a pretty specific use case but one that I think lots of Balsamiq users face.

The resizing/relative positioning thing is an issue for me on the Browser element. My idea is to have two elements – the top half of the browser and the bottom half. You could then create a symbol with the top half of the Browser and your header, and a separate symbol with the bottom half and the footer. Then, in the Inspector for the top half element, you could have a checkbox option to “connect to bottom half.” When checked, the top-half element would find the bottom-half element and extend its side borders that far.

Again, this only fixes the issue with the Browser element, but given that 99.9% of my mockups (and I’m assuming lots of other people’s) start with that element and have the notion of headers and footers, it would be super useful!


Interesting one! Thanks for joining the discussion @DanniB. :slight_smile: