Fix two visual inconsistencies in datagrids.

Review Request #7218 — Created April 16, 2015 and submitted

Information

Djblets
release-0.9.x
62f1f51...

Reviewers

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.

reviewbot
  1. Tool: Pyflakes
    Ignored Files:
        djblets/static/djblets/css/datagrid.less
        djblets/static/djblets/js/datagrid.js
    
    
    
    Tool: PEP8 Style Checker
    Ignored Files:
        djblets/static/djblets/css/datagrid.less
        djblets/static/djblets/js/datagrid.js
    
    
  2. 
      
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-0.9.x (0355b1f)