Grid Width Problems

I have a grid inside a DIV with the width: 100%; and height: 100%. The problem I see occurs when I give the DIV addtional properties such as border: #336699 1px solid; padding-left: 5px; and padding-right: 5px;

This makes the grid want to hang over several pixels on the right hand side instead of sitting nicely in the middle. If there are more rows than visible area, the vertical scroll bar that appears in the widget also goes off the right side of the page.

I thought I had solved this by getting the width of "tag50" (document.getElementById('tag50').clientWidth) and resetting it. But, as soon as I click on one of the column headers to sort the data, I'm back to square one. The grid hangs over the right edge of the page. This makes the right border look bad.

I am testing using IE6 WIN2000 SP4. Has anyone else encountered this issue? Is there a workaround or patch? Thank you for your time.

I had similar issues and finally went with fixed width layout - without loosing any time in R&D.

You can try setting some id to grid and play with document.styleSheets[document.styleSheets.length-1] setting. Try setting grid width using CSS property.

"tag50" (document.getElementById('tag50').clientWidth) is suppose to fail after a resize / refresh.

I am not sure what you mean by "setting some id to grid." Could you please post an example? Thanks in advance.

obj.setId("MyGrid");

Then CSS property will be something like

var lastStyle = document.styleSheets[document.styleSheets.length-1];
lastStyle.addRule("#MyGrid .active-column-0", "100px");