Balsamiq Community Discussion

Display Bug: Buttons with Icon and/or Menu

I discovered a display bug in the button control when used with an icon and/or a menu after importing some symbols I’d made in B2. For the icon, it does not always appear where I’d expect, especially when the width of the button gets “too small”. For the menu, if there is no text in the button label, the menu caret positions itself at the very right side of the button rather than in by the roughly five pixels it should be. Adding a single character puts it where it should be. So to just get a single icon with a menu you have to insert a space character as a button label, but that has the side effect of changing the position of the icon just slightly to the left. (See image at the bottom).

I’m not exactly sure what to do in the “width too small” cases (short of forcing the button to a minimum width based on the presence or absence of icons and menu carets). However, being able to show just an icon and a menu caret with no need for a space character should definitely be possible.

1 Like

Hi @Jenni_Merrifield!

Thanks for the great example! Have you tried playing around with the “Text Alignment” as well as the “Asset Alignment”?

The “Text Alignment” controls the position of the icon on the button, I found setting the “Text Alignment” to center will provide you with “better” expected results.

Let me know if the screenshot below makes sense! And if I am in the ballpark of understanding your problem. :smiley:

Yes, yes. Please check my diagram again - it is actually the TEXT ALIGNMENT that I’m playing with in each situation. I only modified the control/asset alignment just to make certain aspects of the display behaviour apparent.

For example, is the icon actually always “centred”, relative to the button width, when the text is also centred? If the controls aren’t also centred with each other then, because the centre of the button (or the space between the right of the button and the edge of the caret) shifts to the right as the control gets wider, it appears as if the icon also shifts to the right as the width increases. But, by aligning the controls in the same way as the text you can see that when there’s no menu, the icon stays right in the centre, even at the smallest width, but that once the menu is added, the icon neither sits at the “centre” of the space between the right edge and the menu caret nor at the overall centre of the button. In fact, the icon even shifts slightly to the right of it’s “standard” position when the overall width is too small.

1 Like

Ohh, totally understand what you’re saying now! Yes, this does seem like a bug. :smile:

Sorry I wasn’t able to help!

Hi @Jenni_Merrifield and @keith

Yes there are some display bugs…

1. No text and menu icon
The menu icon touches the right border of the button control. Which it shouldn’t when there is enough space. Which is clearly the case in the bigger buttons.

2. Right align
Nom nom negative top left corner I would say. The right align has several issues.
Displaying the icon and text when the button is too small to normally display everything.

3. Center with menu icon
The icon menu icon gets included in the width calculation. The push to the left should only happen when there is inssufficient space to diplay the complete text.

I’ll pass the details on.