SlickGrid 100% height of parent?

Question

I'm trying to use SlickGrid with jQuery Layout UI, and I want SlickGrid to occupy 100% height of it's parent pane.

Issue is, when SlickGrid is instantiated, it has no rows (part of my ajax interface loads in the data later, not on page load), so the height is set by default to something like 1px (plus the height of the headers). When I load in the data later, I can't see any of the rows.

I've tried setting the SlickGrid DOM element to height: 100%;, but that does nothing. How can I force the SlickGrid canvas to take up 100% height of the pane it lives in, even if it has fewer rows of data?

Answer 1

For those like me who got a similar error but different circumstances :

From the wiki - "The explicit width and height on the slickgrid container are required in the markup, otherwise the grid body is not visible (height:1px) and the grid gets the width of the grid header (width:100000px)."

So don't forget to give the main grid div a width & a height !

ps: Don't think it applies to this question here but this was the only question which popped up on searching "slick grid 1px bug" :-/

Answer 2

I hope this answer is still usefull, I came across it in another answer: https://stackoverflow.com/a/10878955/4606828

In Slickgrid options add autoHeight:

options = {
       ...
       autoHeight: true
       };

The Slickgrid will always grow with it's content and you can set the parent's height to whatever.