Row Details Not Expanding Properly in OSX

pmc

Hi,

I'm using DataTables 1.9.4 for the following website:

http://aia.cfa.harvard.edu/filament/

I'm baffled by an issue that only shows up under OS X El Capitan in all browsers on a MacBook. The same thing doesn't happen on the Red Hat or Windows machines I've tested, nor a MacPro desktop, though I can't recall the OS version.

When you click the row details icon to open the drop-down field, the table doesn't expand properly to show the additional info. This affects the last few rows on any page, but it's most problematic when you filter the table down to one element:

http://aia.cfa.harvard.edu/filament/?search=0998

The row details do open, but they can only be seen by scrolling within the small space occupied by the un-expanded single row.

Any ideas on what might cause this or a possible workaround?

Thanks!

allan

I'm seeing the issue as well and it is caused by scrolling being enabled in the table and the scroll collapse option also being set.

You could call fnDraw after the child row is shown, or better yet, update to 1.10 (since 1.9 is no longer supported) where this issue should be resolved with the latest releases.

Allan

pmc

Hi Allan,

Thanks for your quick reply. I'm really glad that you also saw the issue because otherwise I'd think I'm crazy... My attempt at the fnDraw solution worked on the first try, which is very suspicious, so I removed the line and it worked without it. Sure enough, I don't see the issue anymore on the live version. I am thoroughly mystified. I will take a look on another machine when I get a chance.

Thanks,
Patrick

P.S. I will be sure to use 1.10 next time I'm implementing DataTables. Just trying to get a quick fix for this, since I'm no longer actually working there. I'm sure it's frustrating to respond to inquiries about an outdated version...

allan

A proper fix for this is to use min-height for the scrolling container height (which 1.10 does), rather than height as 1.9 does. You could hack the 1.9 source to do that if you need it.

Allan

pmc

Thanks, Allan.

I am able to resolve the issue using either fnDraw or min-height. I may not be applying the min-height solution exactly as you intended, though. I just stuck the following into the CSS at the top of my page, rather than editing any of the DataTables files:

#container .dataTables_scrollBody { min-height: 230px; }

That works by forcing the scroll body to be at least large enough for the row details, instead of the scroll body expanding to fit the row details. fnDraw is a bit nicer in that respect because the scroll body expands/collapses nicely. Having to redraw the table slows it down a touch I think, though, so I'll probably use min-height.

Thanks again,
Patrick