Balsamiq Community Discussion

Cell alignment shifts to right in table when using {color} markup


Ran into an interesting issue today. I wanted a list of links with a header, but I also wanted them spaced out nicely. The Data Grid works perfectly for that since I can turn off the header, row colors and borders and have a one column table that looks like a list. I didn’t want underlined links so I just used the {color} syntax.

However, when my grid had the data below in it, each cell became right aligned (not via the icon setting, just automatically):
{color:#214781}Option 1{color}

However, when I put something in the 2nd row that didn’t use the {color} syntax, things were left aligned again:
{color:#214781}Option 1{color}
Option 2

Any idea what’s going on here?


I have used colors before in my data grids but had not run into this problem – your issue got me curious.

I found if the last cell has a color specified this problem occurs. If you add another cell without color it goes back to using the default left justification.

As a work-around you could specify {0L} on last line to force the left justification. I’m sure the BM3 gurus will get this one fixed soon.

edit: clarified the {0L} statement.


Ah, very cool! My workaround was to add another row and then crop the table so that it doesn’t show up which works too. But it’s great to have more closely pinpointed it being a “last column of the table” issue - thanks!


Well, this is a fun one…:stuck_out_tongue:

I’m not sure what is happening here, but I will see if we can get it fixed.

Rene, have you been using this workaround for long? I am wondering if this has always been like this, or if we meddled with something and broke it.

Thank you for always having excellent feedback and bug reports, Rene. I’m sorry I didn’t get to this earlier, but I’m glad @russ swooped in with the assist :slight_smile:


This was the first time I ran into it, so it’s a new issue for me. I’m sorry to not be able to provide context about how long it may have been around.


No need to be sorry, my friend. I’m sorry that you hit it!


Interesting follow up. So long as that last line doesn’t either start with { or end with }, then it also works as expected. I had my last line of one of my examples start with 5 blank spaces (to emulate a tab) and I realized it worked without problem. So instead of adding an additional column or row for my other example (above), I just put a space after it and it worked to fix the problem as well.