grid size issues

I have been trying to find a way around this problem for a while now but can't seem to think of anything that would work out effeciently. My grid is very dynamic when it comes to sizes sometimes it has 4 columns sometimes 30, and it can have 2 to 8000 rows.

The problem i keep comming across is if i set a % size it will have too much room so there is random blank space on the side or bottom, so i will add a static fix the size depending on # of rows or columns, but that is a dirty fix that will only work for certain resolutions. Is there a better way to do this or am i out of options?

I was faced with a similar problem. I thought the solution might be to place the grid on a resizable DIV.

I worked on a solution for this last month but I stopped it to address something else. So its still not quite finished. Here's a link -

http://web.aanet.com.au/~atm/js/

It works with any of the Gecko browsers like Firefox, Netscape and Flock. But IE doesn't like it and Opera is boned too.

You can grab at any point along the border but its a bit sensitive about the exact position. When dragging outwards, you'd need to grab slightly inwards and vice versa when dragging inwards.

It will handle any type of positioned DIV. Some border styles have a problem in FF. Try resizing DIVs 1, 2, 5 or 7 outwards to see what I mean.

As with draggable DIVs, I had to add parameters to handle all sorts of exceptions. Resized grids have a problem in FF too. A solution's been posted here some time back but I haven't incorporated it in my example.

this is what i have to try to fix the issue most of it works great there are a few minor issuse though.

function reSize()
    {
        //IE
        if(!window.innerWidth)
        {
            //strict mode
            if(!(document.documentElement.clientWidth == 0))
            {
                w = document.documentElement.clientWidth;
                h = document.documentElement.clientHeight;
            }
            //quirks mode
            else
            {
                w = document.body.clientWidth;
                h = document.body.clientHeight;
            }
        }
        //w3c
        else
        {
            w = window.innerWidth-10;
            h = window.innerHeight-40;
        }
        table.setStyle("height", h-225);
        if(size <  h-225)
            table.setStyle("height", size);
        if(totalWidth+35 < w)
            table.setStyle("width", totalWidth+20);
        else
            table.setStyle("width", w-20);
    };
    
    table.onColumnWidthChanged = function(colWidth, colIndex){ 
        if(colIndex == null){
         	myLengths = colWidth;
         	totalWidth = 0;
         	for(c=0;c<myLengths.length;c++)
         		totalWidth += myLengths[c];
         }
         else{
         	totalWidth -= myLengths[colIndex];
         	myLengths[colIndex] = colWidth;
         	totalWidth += myLengths[colIndex];
         }
         reSize();
    }

1. in IE there is a white border about 3px wide on the bottom and right side, looks like my CSS threw it in there but i removed it and there was no change
2. in safari there is about 2 rows of whitespace after the grid ends until it hits the scrollbar.

any suggestions or improvments would be appreciated.

oops size is calculated above that portion...

var size = 70 + (myCells.length * 20);

oh i forgot it also doesnt work very well with virtual mode on, it leaves a large potrion of the grid unrendered. still lookin for a fix for that part.