Start Building Professional
Web Apps Today

Grid height problem

I'm having a grid in a table and the row which contains the grid has a fixed height of 300px.
The grid container has set the style for width and height to 100%.

The effect I'm having, the grid seems to 'overlay' over the lower rows of the table.
At the very bottom row of the table I'm having buttons which cannot be clicked. WHen I remove the grid the buttons are functional.

I took a look into the rendered grid with firebug and saw this:
<table cellspacing="0" cellpadding="0" width="100%" style="table-layout: fixed;">
<tbody>
<tr>
<td valign="top">
<div style="overflow: hidden; width: 100%; height: 200px; position: relative;">
<img style="display: none; position: absolute;" src="Scripts/dhtmlX/dhtmlXGrid/imgs/sort_desc.gif"/>
</td>
</tr>
<tr>
<td>
<div class="objbox" style="overflow: auto; width: 100%; height: 525px; position: relative; top: -175px;">
</div>
</td>
</tr>
</tbody>
</table>

There are two height definitions set and together they are by far greater than my fixed row height of 300px!
So it seems to me, that one of these divs overlys my button...

In my case I cannot use dhtmlXGridFrom Table because I'm rendering at runtime.
I tried several things, like enableAutoHeightMode and AutoSize, but nothing worked yet for me.

Just add overflow:hidden style to the container of grid - it will resolve issue

<div id="gridbox" style="width:100%; height:100%; overflow:hidden;" >