Balsamiq Community Discussion

Some Vertical Lines Missing in Data Grid


Some of my data grids are missing the automatic vertical line separators. One grid is missing them altogether, others are missing only a few.

The spacing of the code behind is the same, such as Number* ^v,*State … etc.
The only thing I can think of is I’ve been copy/pasting some of my grid data from Notepad to the Data Grid. And then in parts, I’ll copy paste from another Data Grid code behind.

I have noticed a few hiccups in doing so, such as the sort code ^v.
Last related point, I’ve created a Balsamiq cheat sheet in Notepad where I have the carriage return, the bold, the sort code. Is there a problem with doing this?

Thanks guys.


That’s a new wrinkle with the Data Grid, @DebK - I’m sorry about that.

Would it be possible to share the project with us? I’d love to have Florian take a second look at this and see if we can figure out what is going on.

Let me know if that works for you. Otherwise, we will troubleshoot the old fashioned way. :slight_smile:


Brendan - It fixed itself while I was making a sample for you. It gets weirder.

  1. Started new project and copy/pasted grid into it. It fixed itself.
  2. Copied problem grid from one slide to another in the same, my main, project - it fixed itself.
  3. Duplicating the slide via right click - duplicate - does Not fix it.

Btw, the root causes that started this are that the text in your coding area is too small for these old eyes and I make my dataset in Excel. After i get my dataset in Excel, I then perform this function to get part of the monotonous coding done - =a2&"," - which adds the comma. Then I copy that set as values only in Excel. Then I either copy straight to your code area or put that set in Notepad and then move it to your coding space.

I’ll test between copying from Excel and Notepad and let you know.

It’s a weird one.



Copying back into the main project introduces different lines missing.


Huh…well, that’s definitely weird. :slight_smile:

So copy/pasting in the same project hides different lines?

That sounds like something in the rendering engine is messing up. Let’s try this: Save and close out of the app completely. Then reopen just the problem project. Are the lines still messed up?


Brendan - Ok attached is a copy of a grid with the missing vertical lines issue. In trying to fake the lines with a vertical line, I stumbled upon another bug. It seems you can’t have multiple vertical lines in the same format on the same slide. See the vertical dotted line? Try changing it to a solid line. It goes to 0% opacity. Try changing it’s color - no help.

In the code, I played with spacing around the sort icon, comma, and asterisk and I think I had luck with one line where the bottom portion of the sort icon was a v or not the right format. Not sure. Maybe it’s the commas within the data lines.

To fully recreate what I’m doing, create a small data set in Excel.

Then make a copy of your data by using this formula


This will add a comma to your text in A1.
Then select your new set, copy, then paste special - choose values only.
Now put that in the Balsamiq data grid. Clean up anything, add your bold and sorts. Add your spacing at the bottom row.

That’s what I’m doing. Why? Because it’s too painful to type everything out and the screen is too small for my old eyes. :slight_smile:

So here you go.



Grid line issue for Balsamiq to look at.bmpr (719 KB)


Thanks Debbie!

I’m going to have @Florian_Brauer take a look at this, just to double check, but I am having trouble recreating the problem. Both the data grid and the lines are working fine for me - so something else may be at play here.

Florian is in the EU, so I won’t be able to touch base with him until the US morning, but I will do it first thing and then update you!


OK. I reopened the sample I sent you and noticed it looked fine too. Makes me add saving to new project and reopenning to the list of things to test.

I think it’s the commas and something in how what I’m doing ahead of time, gets translated when it’s pasted into the grid’s data field. I’ve already seen where there are hidden spaces/tabs when it gets to the grid.

Ok talk to you soon.




Hey @DebK,

So this may be a little easier than I thought it was.

Because the data grid is so large, you have to zoom out to see everything. This makes everything smaller, and Mockups starts deciding what items it should be rendering. When things get smaller than 1px, Mockups starts rounding. If it rounds down, it doesn’t render the line at that zoom. If it rounds up, it does. That’s why different lines can show up depending on where things are positioned.

All that to ask, if you zoom in (CTRL / CMD and +), do the lines start rendering properly?


It’s the rendering. I just saved to PDF and there are all the Grid lines, plus all my extra lines that don’t render while in Balsamiq - both design and preview.

To your point about zooming, I zoomed in and out and various lines appeared and disappeared, or even all showed up for a second.

So it’s the total amount a items on the screen that dictates the rendering? The grid I sent you was one of my larger grids. As these are client facing mockups of potential screens, we need to paint a somewhat realistic picture.

Thanks for everything! I love your product.




It’s not the number of elements that dictates rendering - it’s their (relative) size.

Here is an example. Let’s say you have an element that is 16px at 100% zoom. That means when you zoom out to 200%, that element becomes 8px. As you continue to zoom out, that element gets smaller and smaller, until it gets to be ~1px. It can actually dip under 1px if you continue to zoom out, and that’s where things can get weird.

If an element dips below 1px, Mockups rounds it’s size up or down. A couple of things influence this (where the viewport is, the actual size of the element, etc). If it rounds down, then it doesn’t render the element. If it rounds up, it gets rendered at 1px.

In your data grid, some of the lines are being rounded down, so Mockups doesn’t render them at that zoom level. They are still there, and you will see them if you zoom in, but they are too small for Mockups to display at that zoom. This isn’t uniform because Mockups takes other things into account when deciding to render an element. That’s why the rendering seems random.

Does that make sense, @DebK?


I’ve often seen this as well, especially after switching my project to the more formal Wireframe view instead of Sketch. I quickly realised it was down to the zoom level but they way I see it is, if some of the lines are able to be rendered, then all of them should be rendered exactly the same - why should some be 0.x pixels wider than others in a data grid?

Zoomed in:

Zoomed out:

I believe on the left I’ve resorted to drawing an arrow on top of where the line should be.

Can you please remove this ‘random’ size behaviour, at least for the Wireframe view, in a future patch? In the sketch view I also found it irritating how duplicated arrows (lines) arranged parallel to each other were always rendered with different lengths, but the Wireframe view gets around that.


Thanks for the additional information about this bug @Ryan! I’ve passed it on to the dev team to see if we can improve this. We’re here if you need anything else. :slight_smile: