Balsamiq Community Discussion

Get rid of minimal height of 10px


I often use a box to make something like a thick horizontal or vertical rule. But I always stumble over the minimal widht / height of 10px. Do we really need this minimal widht? I actually often use the cropping feature to bring it down to 5px :slight_smile:


I agree with @Roland_Studer. The minimum drives me crazy. I use the same workaround with crop to set the <10px values. I dont like unnecessary limitations, please remove the limit :pray:


I add my voice to @Roland_Studer and @uxdcz and ask to let us define our own dimensions. The group/crop workaround is a painful overhead. And beware if you need to resize your control, it gets tricky. You need go inside your cropped group and resize the control, because if you resize the whole group, the result is ugly.


The thinking with the 10px minimum is that anything smaller is hard to select.

I’ll give you another workaround to make things smaller, which might be faster than the crop trick: duplicate it, drag the copy down a bunch, select both, group, then resize the group. Then ungroup and delete the copy.

What are some examples of times when you need things to be smaller than 10px? Post some screenshots, they work well on me generally! :wink:


Rectangles and lines are good examples. Sometimes, you want to fake a shadow. Right now I create a couple of cropped rectangles, the thinnest possible. The I stack them one after another and making them more transparent as I go. This creates a nice shadow effect.

If it’s hard to select, I’ll just use the lasso and drag around it. Selection is not a deal-breaker for me.

Your workaround works, but it still adds an unnecessary overhead. If people want to make things 2 pixels high, why not!


For example to indicate an active item with a bar, like in Android Tabs:

or the same for a vertical menu.

ps: but actually I don’t care that much, because thinking about Balsamiq recently, I remembered what I love about it. And it really is the speed. I always pushed it to its limits visually, but I just last week switched back to the Mockup-style, while I almost exclusively used the wireframe style since it became available. (Back to to the roots, back to the core, back to using it the way it was envisioned to be used :slight_smile: )


Yes please get rid of this. Even with the workarounds, you have to repeat the process each time that you resize something. We can just increase the screen size if we are having trouble selecting something smaller than 10px. I am tryin gto recreate some of the Android input boxes and the lines underneath the text are near impossible to recreate in Balsamiq. I don’t want to use the horizontal rule. Just a regular line please!


As a new user, I would say I really dislike this limitation as well. For instance I would like for instance to create a quick icon placeholder to convert into a symbol e.g. a collapsed menu icon made from 3 rectangles. Or an icon of 6 rectangles to represent a grid layout vs. an in-line layout. I’m disappointed I have this limitation and need to come up with workarounds - resize, ungroup, re-distribute, etc. This should be a no-brainer for a new user, not a process.


Agreed. Please get rid of this minimum…why limit users in this fashion?


We really wanted to make sure elements still retained their readability, @Design_SeventyOne. Mockups is mimicking pen and paper, and when you draw something that small, it can be hard to see what it even is.

But, that being said, this is something we have talked about a lot and will continue to talk about. :slight_smile: I’ll make sure they know you’re looking for it too!


I kept hitting the minimum wall trying to design a custom progress bar. If items are hard to select I only have to zoom in.


I am designing a sidebar menu with a highlight colour. Ideally I need the width of this rectangle to be around 6-8 pixels. Currently 10 looks a little thick for my taste.


100% agree. In sketch mode I get the rationale, but in mockup mode, I am unable to communicate a pretty basic navigation pattern. Alternatively, give me the ability to fatten up an H.Rule and a V.Rule.


Honestly, you’re already breaking this rule, and there are multiple controls I have to zoom into in order to select.


I would like the minimal height removed as well please. I notice at the top it says B3 beta. When will this be released? I can’t imagine it is a complex change to make.


Thanks for sharing your need @mp_np, I’ve added your vote for this one. While this feature is not part of the roadmap (for now at least), we continue to collect feedback and use cases where it would be helpful.

Feel free to share any related screenshot, as they usually lead to some good discussions. :slight_smile:


My use case is in creating a custom symbol for google maps by overlaying white rectangles over bits I wanted to hide. Having to group, and crop each one is cumbersome when just reducing the number or dragging the handles would have been much easier.


This comment is aimed at @brzsw and any anyone else who wants thick lines or bars in their UI as it describes the hack I use to accomplish this. While less ideal than actually being able to draw rectangles and shapes less than 10px wide/high, it does make it relatively easy to achieve this particular use case than the “group and crop” method.

What I do is create a symbol out of a group of horizontal/vertical rules together, with the number of rules in the group equal to the thickness I want (e.g., 2 lines for a 2px thickness, 4 for a 4px thickness, etc.), shifting each rule one pixel vertically/horizontally above/beside the one added before it. Add the symbol wherever it is required, changing the width/height of the whole symbol as needed.

If you need lines of different colours you can create multiple symbols each with the rules set to the colours you need or you can just edit each symbol instance to be the colour required at that location.