Balsamiq Community Discussion

Horizontal and vertical rule alignment


Every time I add or move an horizontal or vertical rule I need to adjust it with the arrow keys to properly align it. Please change the smart alignment of these elements so they align their centers instead of those invisible margins.




Hi again @gelo,

Totally get your point here, I’ll talk to the dev team about it to see how we can improve this.

In the meantime, I would suggest using the Arrow control instead. It will allow you to align your elements properly and using SHIFT when dragging an arrow end will allow you to easily make it a horizontal or vertical line, as shown below:

Let us know if you need anything else! :smile:



Thanks Virgin. The problem with using an arrow is that it is much thicker than the rulers using the wireframe skin.



Totally @gelo! I’ll bring up the H.Rule/V.Rule issue in our next meeting to see what we can do about it.

Thanks again for the report!



Excluding the margin when aligning horizontal and vertical rules would be a big time saver for me too.

Thanks. :slight_smile:

1 Like


Hello @Virgin. Is there any progress on this issue? It has been reported 3 years ago and I have the exactly same issue as guys had. The fact that the H.rule has unchangeable height is very annoying and inconvenient. The width of the line itself is about 1px so why are there additional 9 pixels wrapping up the line? Are you planning to put this on dev list any time soon?I guess I will have to use Rectangle shape instead of now.



There hasn’t been an update on this, @David_Kubac. I’m sorry about that.

We are heads down on the completely re-written version of our desktop app. It’s taken longer than we thought, but it will be ready later this year. As soon as that ships, this will be on the docket of things to look at.

I’m sorry for any frustration this has caused you, my friend.



Thank you for your quick response @Brendan. Is there anything you would recommend me instead in the mean time? I just fond out that rectangle cannot be thinner than 10px either :frowning:
Specifically I’m looking for a way how to make simple line 1px thin without any margins or paddings.



Ahh, I am not sure we will re-evaluate the minimum size, David. It’s a pretty hot topic internally, but we tend to side with making sure everything in a wireframe is readable. When you dip below 10px (with certain controls) things can get hard to make out.

Because we are a low-fidelity wireframing app, we want to push more towards ease of use and simple diagraming, not precise prototyping. We leave the in depth stuff to Invision and Axure. :slight_smile:

All that being said, we will talk about it. :slight_smile:



I do understand that @Brendan. However the H.rule and V.rule are themselves about 2 pixels high and then there is a white space filling in those 10 pixels which is giving me a trouble. Because of that space, it is hard to align things properly and work with symbols.



Totally get your point, @David_Kubac and we’ll see what we can do to help with that.

Thanks again for sharing your need.



Hey David,

I cope with it with the flow:

  1. Align rules according to Balsamiq’s rulers
  2. Move the Rule control for exactly 5 pixels with arrow key to align these visually

It’s an extra step, but works fine for me :wink:



Thanks @Alexey_Kolchenko, I’ll give it a go :slight_smile:



Thank you @Virgin for taking it into consideration.



Yes, definitely agreeing with this Alexey. If you can directly follow these rules and keep the rule control to exact 5 pixels, this would definitely go as you’ve perceived.