Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Tim Robbins on Nov 15, 2007 08:02
open dhtmlx forum
horizontal scrollbars show up if autowidth columns are enabled and grid width is specified in percentages

I am wanting my grid to span 100% width and 100% height of the document. the only scrollbars should be the vertical scrollbars on the document.

If am using 100% width on my grid div. I have autoheight set to true on my grid to get the 100% height. With this setup, i am getting horizontal and vertical scrollbars on my grid. The 'objbox' div is the one that is getting the scrollbars. I could probably set some css to remove them, but i was wondering if there is a more legal way, or if i am doing something wrong. FYI, I can change the grid width to any percentage, and i still get the scrollbars. This issue happens in IE and Firefox. Here is my grid initialization code:

<div id="gridbox" width="100%" height="300px" style="background-color:white;overflow:hidden"></div>
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.imgURL = "img/";
mygrid.setHeader("Open, Download, Name, Size, Date");
mygrid.setInitWidths("100,100,*,100,100");
mygrid.setColAlign("center,center,left,right,left");
mygrid.setColTypes("ro,ro,ro,ro,ro");
mygrid.setColSorting("compareExt,sort_ext,str,int,str");
mygrid.enableAutoHeigth(true);
mygrid.init();
mygrid.loadXML("fileList.jsp?cwd=<%= cwd %>");
</script>
Answer posted on Nov 15, 2007 09:06
The next situation is possible
The problem may occurs in FF because of too tricky native scroller initialization (
 - resize occurs
 - window has not scroller by default
 - width and height calculated correctly
 - because height > window height, scroll for window appears
 - because of added scroll width of window content changed, but not event called, so auto-height and flexible width not applied
 - inner scroller shown because inner width of window smaller than grid ( because of added vertical scrollbar )

You can fully remove scrollbars by
    grid.objBox.style.overflow="hidden";