Icons don't display on small buttons anymore


#1

This may be similar to Display Bug: Buttons with Icon and/or Menu, but in this case the icons don’t even show up anymore.

I have dozens and dozens of buttons sized 22x21, and now XS icons do not display in the buttons.
This broke within the last few versions.
No combination of centering or font size will get it to show up.
Making the button bigger is not an option, and redoing all my mockups with an icon superimposed onto a blank button will be a nightmare.

Please fix this, and now my mockups are full of a bunch of empty buttons.


#2

Hi @wichase,

Sorry for the hassle with this.

You are right, we just changed the display behavior of buttons to fix some bugs, that is why you need a minimum width of 38 to get the icon displayed.

There are 2 ways to get the result you need:

  1. Use the icon and use show border. S size is 24x24 and XS is 16x16.

  2. Use a geometric shape which will allow you to define any size you need and insert an icon in it.

If you need help redoing your existing mockups, I’ll be happy to give a hand! :wink:

Just send your BMPR to support@balsamiq.com so I can have a look at it. We will keep your data in the strictest confidence and only long enough to help you with this. Also please let me know which one you prefer between icon and geometrical shape.

Let me know if you need any further information.


#3

I really do appreciate your quick response and offer of help.
Unfortunately, our corporate guidelines won’t allow for sending our mockups outside the company.

We basically have a large collection of Balsamiq templates of our current UI that we use when creating new mockups of UI changes (so we don’t have to redraw them every time).
Unexpectedly, it looks like I will have to redo them all if I want to keep on the current version. :frowning:

I also appreciate your suggestions, but neither method will entirely work for me unfortunately.

The first option deals with fixed sizes, which don’t match the various size of buttons we are dealing with.
The second option, while much more viable, has two issues.
First is that the icons aren’t always centered (try an XS table icon in a 23x24 rectangle).
Second is that there is no way to control the icon color. It is always a gray color.

And neither method has an option to change state (normal, disabled, etc).

The only thing that looks visually the same is to take an XS borderless icon, make it black, and center it on the now empty button, then group it. I can then make symbols out of that group.
Still, I will have to replace every single button this way and redo all the links, since the new grouping doesn’t honor the link of the now empty button.

Perhaps could you consider an option for buttons that would allow for no padding?
Otherwise I will likely have to go back to a previous version, or face days upon days of redoing mockups that were “done”. :cry:


#4

Yikes, @wichase, we are sorry about that! We definitely didn’t want our bugfix to create more pain.

We are going to get it fixed for you (and anyone else who ran into this issue) soon. In the interim, here are the installers for 3.1.7 (Mac / Windows)

Again, we are really sorry for any frustration this caused you. We will make it right again!

I would have let @Virgin break the news, but he is on the other side of the world and (hopefully) asleep :smile:


#5

As always, I greatly appreciate the quick responses on your forums.
Thanks again for considering my plight, and for continually making Balsamiq Mockups better all the time!


#6

Hi @wichase,

Good news, we just fixed it in our latest pre-release available here: https://balsamiq.com/download/next/ :wink:

Just a word of caution: this is a pre-release version, so we don’t recommend using it on mission-critical work.

Please let us know if you hit any snag.


#7

You guys are awesome. My buttons are back! :joy:

The only minor things are:

  1. When rotating icons on these small buttons, sometimes there is a strange offset that still happens, where the icon appears outside the button.
    Try a 24x24 button with an up arrow-up icon, and then rotate it. Two of the positions will be outside of the button.
    Its minor for me because on the few buttons where I have rotated icons, I can just replace the arrow with one pointing the proper direction.

  2. Text inside a small button is now shrunk to unreadable sizes.
    I have a 26x26 button with the letter A inside, 20pt font bolded. Before the A would fill the button, but now it is shrunk very tiny. I only have one button like that, so just centering a text string of “A” over the empty button wouldn’t be too much trouble, but I don’t know if other users did something like this extensively and that workaround would be a lot of work.

Thanks again for your quick responsiveness!
This fix also doesn’t seem to break Display Bug: Buttons with Icon and/or Menu, at least after a quick check.


#8

Awesome @wichase!

I have filed the other two bugs; thanks for taking the time to double check those for us.

Let us know if you see anything else :slight_smile:


#9

Hi @wichase ,

We just released our latest version (3.2.2) including the fix regarding the Button control behaviors. Thanks so much for reporting it! :smile:

You can get the new version (3.2.2) here:
https://balsamiq.com/download/

And the complete release notes are here:
http://blogs.balsamiq.com/product/2015/10/01/3-2/


#10

Thanks for your efforts! In general it is back to the expected behavior.

It does appear that the left padding for buttons is now all but non-existent.
This then looks a little weird for text because it is right up to the left edge of the button.
And in my buttons, that are 22x21, if I just have no text and an XS icon size, it doesn’t look centered.
In fact, the position doesn’t appear to change at all when the justification is changed.

It’s almost as if there is no left padding but still some right padding.
This seems to be confirmed if I make the button much wider and change the justification.


#11

Thanks for checking in @wichase!

I’ll bring this back to the devs and we will get this right. Sorry about that.


#12

Thanks for your efforts

Bless you guys :slight_smile:


#13

Hey @wichase,

We just released our latest official version (3.3.1) including a the fix for this! The button behavior should be optimal now.

Thanks again for your reports @wichase! :smile:

You can get the new version (3.3.1) here:
https://balsamiq.com/download/

And the complete release notes (including some nice videos about the new arrows) are here:
http://blogs.balsamiq.com/product/2015/12/02/3-3/