Setting background color on RowColumnDefinition decreases border width

GoJS
1

Hi,

If the RowColumnDefinition in a tablePanel has a background color, the border width seems to be smaller than in the rest of the table: https://codepen.io/dominic-simplan/pen/MWYMQgO

grafik
grafik756Ă—355 8.78 KB

Without the background, it is the same width:
grafik

Any way to make the border the same width as the rest of the table?

2

Whenever a Shape has both a fill and a stroke, the stroke is drawn centered on the edge of the fill. So half of the width of the stroke covers the filled area and half extends outside of the filled area.

The same thing is happening here except the filled area is a complicated Table Panel.

So you could try setting the background of the itemTemplate to “white”.

Or you could try setting the margin on the “Table” Panel to be half of the Shape.strokeWidth of the border Shape.

3

Thanks walter, the background of the itemTemplate did not work, as it overwrites the background color of the column header, but working with the margin solved the issue!

4

Sorry, I meant the itemTemplate used by all of the regular rows, not in the header.

5

Ah I see. In my case there is no separate itemTemplate for the header as I use the first row/column of the itemArray as the header… so after all the margin might be the best/only solution for me.

6

Hello @walter,
again fighting with this.

Now I have a background color on the first row and the first column and it looks like this:

grafik
grafik918Ă—523 32.7 KB

With these settings:
table.margin = new go.Margin(0.6, 0.3, 0.6, 0.3);

Seems like the background is applied twice on the first cell and therefore looks strange.

Any idea how to fix this?

7

I really have no idea of what you are doing, so I cannot suggest anything.

8

Here you can also see the original issue: Add or Remove Columns

grafik
grafik971Ă—297 10.3 KB

The border of the header is not displayed correctly.

I tried fixing it with the margin as you’ve suggested above which kind of work when I had only a background color in the first column.

However now I have a background color (blue) on both the first column and the first row, and the result is the screenshot in my previous post, so the margin doesn’t seem to help here.

Still don’t really understand why the background color is displayed in front of the table border in the first place.

9

I have added { margin: 0.5 } to that Add or Remove Columns sample (and the Column and Row Resizing sample), to fix that minor visual inconsistency.

I’ll look into the other issue, where the column background doesn’t seem to extend all the way towards the left or towards the top. This seems to be a drawing bug – we’ll fix it in the next release.

You have defined your Node template so that the border Shape is behind the Table Panel:

Node, "Auto"
    Shape
    Panel, "Table"

That means the Panel is drawn after the Shape is drawn. But it is the Panel whose backgrounds you have specified, either for the whole panel or for individual rows or columns. That’s why those backgrounds are being drawn half on top of the stroke of the border Shape.

1 Like