I have the following code in my html:
<div tal:define="idTable string:llselectiontbl_$lltype" style="height:70%">
<input type="hidden" id="JsonTableName" tal:attributes="value idTable" />
<input type="hidden" id="selected_product" name="selected_product" value=""/>
<input type="hidden" id="selected_product_short" name="selected_product" value=""/>
<hr style="color:green"/>
<div id="llselectiontbl_" style="width: 98%"/>
<hr style="color:green"/>
<script type="dojo/method">
this.addOnLoad(function(){ debugger; displaySelectionTable('', '$forceOpenSingleLL')});;
this.addOnUnload(function(){ debugger; removeSelectionTable()});;
</script>
<br/>
</div>
The Grid is then created via JavaScript?:
var tbl = new dojox.Grid({
id: "llselectiontbl_",
autoHeight: false, autoWidth: false, defaultHeight: '20em',
structure: selectionTblLayout,
model: llSel.selectionTblModel
}, "llselectiontbl_");
When the window-size changes, Grid.render() is called. In Grid.render() / prerender() / resize() there is a part that calculates the new height by the height of the parent container. Because the parent in this case also contains two <hr>-elements, the height of the parent is generally 15px higher than the Grid.
Because of the render() now, the Grid gets adjusted to Gridsize+15px which also stretches the parent <div>. This happens every time render() is called, so the Grid grows vertically every time - which after a while makes it really long - and is definetly unwanted.
Unless you are using a grid within a layout widget, you should either be using autoHeight=true or setting the height. In your case, you should be able to just style your div to be "width: 98%; height: 20em;" (instead of just specifying the width there).