ParamQuery Grid behind a bootstrap tab - how to set min-size of grid?

Question

I have my grid tucked "behind" a bootstrap tab. In other words, you won't see the grid until you click on the tab.

This is causing the grid to collapse to zero size, causing me to have to expand the grid every single time

I tried setting the "object" to obj.collapsible = { collapsed : false }

which didn't do anything.

I tried setting resizable in

 var obj = { width: 700, height: 400, title: "ASO REPORTS",resizable:true ,draggable:true };

to false, which simply just made it to where I couldn't even resize it to see the data at all.

I saw a min-width option, but that was just related to invidiual columns and not the table / sheet itself.

Is there a way to fix this so that there's a set size, even tho it's "hidden" until the tab is clicked?

Answer 1

<div style="height:100%;">
  <div id="grid_json" style="margin:auto;"></div>
</div> 

var obj = {
            width: "100%",
            height: '80%',
            resizable: true,
            title: "Grid From JSON",
            showBottom: false,
            scrollModel: { autoFit: true },
            dataModel: { data: data }
        };
        $("#grid_json").pqGrid(obj);
    }); 

hope this will help you, u can adjust the height based on you requirement. here div height should be mandatory.