Bug: "Icon and Label" and "Icon" & "Label" placement issues


#1

For the “icon and Label” element the text is offset 1px higher - no possibility to adjist - but Icon is perfectly aligned with the pixel grid

For the “icon” element:
it does not properly align to the pixel grid like the “icon and label” - it seems approx 0.5px higher (not centered in the lines)
when the “label” is magnetically snap-centered (blue lines appear) the text is 1px too high
when the “label” is centered vertically with it using “Align Middle” function, the text is 2px too high.

Graphics is zoomed in to make differences more apparent, they are just as visible at 100%


#2

Hi @Lesani,

Sorry for the hassle with this.

The alignment actually depends on different elements used in your mockup:

  • Icon used (we use the Font Awesome icon set and they control the padding on those)
  • Font used (default Balsamiq Sans will look different compared to e.g. Arial)
  • Size used for both text and icon

That is why some elements will align differently from one to the other as discussed in this thread. I’ve added your vote to the related request for a better behavior depending on the font used (as I see that you don’t have the default one in your example).

Please let us know if you need anything else in the meantime, we’re always happy to help however we can!


#3

Hello! Thanks for the quick reply!

While the padding may be controlled by the icon set, it differs between using the icon in the “Icon and label” and the “icon (without label)” element…
If you look in my screenshot above, the icon itself is perfectly center between the lines in the first example, and slightly off-center in the others.

concerning the font: I’d say “Arial” is a pretty standard font, even though it may or may not be the preselected font, it probably still is a commonly used font.


#4

Totally see your point now, @Lesani, sorry about that.

Font padding is a weird problem because it’s different from font to font. With that being said, I will pass this on to the dev team and see if we can do better here.

Thanks for taking the time to share your thoughts with us today. :slightly_smiling: