FixedColumns - Weird Graphical Issue on Bottom Row

JamesY

Hello! I've been chatting briefly with Allan over twitter about my strange issue. I've been able to isolate the problem enough where I can give you an example.

http://uhs.hockeysim.ca/PubSite/index.php?L=1575

From here go to:
- Statistics
- Stats Central

So the first time you go here, you will see the graphical issue at the bottom row of most of the tables. On subsequent refreshes, the issue goes away. It also goes away if you sort by one of the column headers.

To re-create the issue, click on any of the other links (like News, let's say) and go back into Statistics > Stats Central; the graphical issue re-appears.

allan

Got it! Thanks for the test case.

What's happening is that the thumbnails don't have any size or width, so initially the browser just makes them 16x16 (or something) with the "image loading" icon.

At that point DataTables initialises and takes the measurements it needs to.

Then the images load. They are a little bigger than the browser's "loading" icon, and the row heights have already been matched, hence the misalignment.

Try adding: min-height: 30px to your images. I think that will fix the misalignment, although it might mess up the images if they stretch.

Another option is to call fixedColumns().relayout() once the images have loaded. Knowing when that is, is a bit more difficult! (To the point that I'm not certain what the best solution is).

Allan