dgrid icon indicating copy to clipboard operation
dgrid copied to clipboard

Some horizontal row borders disappear when using Column Sets

Open msssk opened this issue 7 years ago • 1 comments

Looking at dgrid's test/complex_column.html page in Chrome 58 some horizontal row borders are missing. This is due to the element's height being set to 100%, which doesn't make sense since it doesn't have an explicitly sized parent.

Removing the height rule allows the element to vertically size correctly and the bottom border does not get cut off.

msssk avatar Apr 24 '17 21:04 msssk

Here are some images to clarify the problem (which still exists in Chrome as of version 79):

In the 3rd visible row, the cells in columns 1 and 2, with the values "note" and "false", have no border below them:

complex-column1

The same row when hovered makes the entire row dimensions clear:

complex-column1a

Removing the 100% height rule for the column set results in the borders being displayed along the bottom of the cells, but the cells do not expand vertically to fill the row, which I think is undesirable:

complex-column2

The following rule will reduce the height of the cell so that its border is not clipped:

.dgrid-column-set .dgrid-row-table {
  height: calc(100% - 1px);
}

complex-column3

This almost works, but the bottom border can end up misaligned with the bottom border on the adjacent cell.

Column Sets allow you to create some complicated structures that are rendered inconsistently across browsers. I'm not sure how to fix this, but we should at least record it as a known issue, with some information on possible solutions, perhaps in the Column Set documentation.

msssk avatar Jan 08 '20 22:01 msssk