jqGrid incorrect width in hidden divs

Question

I'm using jqGrid version 4.4.1. I need to create x number of grids on the page. The first grid is outputting in a visible block, but others are output in the following format

<div style='display:none'>
//My jqGrid output
</div>

The first table which was output in the visible div has the correct width:

<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_table0" dir="ltr" style="width: 920px;">

but all other tables have incorrect widths: eg. 100px;

<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_table1" dir="ltr" style="width: 100px;">

When I try to render all the tables in visible divs, all the widths calculate correctly.

If the element is hidden then the .width() will return zero. — Ashwin Preetham Lobo
and what solution do u propose? I need to render X tables at once in tabs — Nikita Platonenko
I temporarily realised dirty javascript solution, as i used bootstrap it will help for other bootstrap jqgrid users setTimeout(function(){ $('.tab-content .active').not(':first').removeClass('active'); },200) — Nikita Platonenko
Do you have widths set for each of your columns? I have grids that are hidden and only shown and load data once rows are selected in a "master" grid which show at the correct width? — Mark
i used only autowidth:true. Problem happens when i try to render table in display:none block — Nikita Platonenko

venugopal venugopal · Accepted Answer · 2013-03-18T15:28:21

Yes , you are right.. when disply:none, the grid width would not be calculated properly. To work around this, you have to identify the event which is responsible for showing your grid , and in that event ,after displaying the grid , you should use setGridWidth function to set the grid's width properly.

As you are not using individual column widths, I would suggest you to wrap your grid in a div (let us say its id is container_grid) and when ever showing the grid, set its width to the width of the wrapping div.

If you are using percentages for widths of div elements (or say fluid layout) , you can get the width of the wrapping div using offsetWidth method of javascript like this.

if($('#container_grid').attr("id")!==undefined)        
            grid.setGridWidth($("#container_grid")[0].offsetWidth);

jqGrid incorrect width in hidden divs

2 Answers