How do you initialize a grid scaled to page/container size?

Suite 7.0/6.0/5.0 and Optimus Suite 5.0
#1

I want to put a grid on a webpage scaled to the size of the page. If the CSS for the div used to initialise the gid is defined as follows:

#scaled_grid
{
	top: 20px;
	left: 20px;
	width: 70%;
	height: 70%;
}

Then what happens is that the grid is initially created the correct size, but the div does not resize as the page is resized. It’s as if the dhtmlxgrid is messing with the style I set for its own container, which is irksome.

If I add !important specifiers to the size style like this:

#scaled_grid
{
	top: 20px;
	left: 20px;
	width: 70% !important;
	height: 70% !important;
}

Then the div now does resize correctly but the grid itself still does not. The grid resizes horizontally and so correctly matches the width of its container as the page is resized, but although it is created with the correct initial height it does not adjust its height to match the size of its container div at all as the container div changes size when the page is resized.

I’m initialising the grid itself like this:

grid = new dhtmlXGridObject("scaled_grid");
grid.setImagePath("dhtmlxgrid/imgs/");
grid.setHeader(header);
grid.setSkin("light");
grid.init();

Does anyone know how I can get this to work please?

#2

The only way to achieve such functionality is to set width and height through “style” attribute, not the css class ( the reason - js code in FF can’t detect percent based styles if they was defined through css class )

If width was defined through styles - grid will be able to detect percent based sizes, and as result after page resize, grid will size itself automatically.

#3

If you still want to control width and height from css , you can use

[code]


[/code]

In such case you can init grid in “grid_here” container, but it size still will be controlled by #scaled_grid css class.

#4

That works. Thanks very much.