Fix two visual inconsistencies in datagrids.
Review Request #7218 — Created April 16, 2015 and submitted — Latest diff uploaded
When the datagrid sets up the fixed header table, the body table's first row shifts down by a pixel. The reason for this is that the body table's first row of data shared a border with the thead, which isn't the case after we move to the fixed header table. Once the fixed header table takes over, the row gets its own border, shifting down by one pixel. To fix this, we now use an evil little CSS trick to insert a 1-pixel high row of transparent content between the body table's thead and the tbody. This keeps things fixed in place until we transition over to the fixed table header, preventing a jump. There's also a fix for the draggable columns. When dragging, the text would shift up just a bit. We now set a proper line-height, ensuring that the text remains in the same location as it would be when not dragging.
Loaded the page multiple times in each browser. The content no longer
shifted by a pixel.Dragged columns and saw that the text vertically-aligned properly.