3.0.5

Can't set grid's height on IE8?

I have a grid. It works fine on IE7 but I got a display problem on IE8. As following code, this grid has 11 columns and just 1 data row. I have to set “grid.setStyle("height", "38px")” otherwise, the grid automatically display many blank rows. In case of narrow screen, the grid is too wide to fit the screen, and the horizontal scroll bar will show up automatically. However, the grid height can’t adjust itself, and the data row is occupied by the scroll bar. To solve this, I programed to see the width of last column. If it is less than 200, I increase the grid’s height by “grid.setStyle("height", "56px")” to fit the scroll bar. The code is as following. It works fine a long time on IE7. But, after users upgrade to IE8, the “grid.setStyle("height", "56px")” seems not work. The scroll bar always occupy the data row position. I am using 2.5.3. Is there any solution or workaround? Thanks.

var grid=new AW.UI.Grid;
var header=["Col-1"," Col-2"," Col-3"," Col-4"," Col-5"," Col-6"," Col-7"," Col-8"," Col-9"," Col-10"," Col-11"];
grid.setId("grid");
grid.setHeaderText(header);
grid.getHeaderTemplate().setStyle("text-align", "center");
grid.setColumnCount(11);
grid.setRowCount(1);
grid.setStyle("width", "100%");
grid.setStyle("height", "38px");
grid.getCellTemplate().setStyle("border-right", "1px solid #c0c0c0");
grid.getCellTemplate().setStyle("padding-right", "3px");
grid.setCellEditable(true);
grid.setColumnWidth(150, 0);
grid.setColumnWidth(50, 1);
grid.setColumnWidth(150, 2);
grid.setColumnWidth(50, 3);
grid.setColumnWidth(150, 4);
var tempWidth=document.body.offsetWidth; //screen width.
for(var i=0; i<grid.getColumnCount()-1; i++)
tempWidth-=grid.getColumnWidth(i);
if(tempWidth<200){//for narrow screen:
tempWidth=200;
grid.setStyle("height", "56px");
}
grid.setColumnWidth(tempWidth, 10);
mrhsh
July 22,
Sorry, cannot reproduce this. Your code works fine for me in IE8 and AW 2.5.4.
Alex (ActiveWidgets)
July 27,
I am using 2.5.3. Do I have to upgrade to 2.5.4 to correct it?

Thanks
mrhsh
August 4,
No, I see the same thing with 2.5.3. I just cannot reproduce what you are describing. Maybe you need to post the complete example, not just code fragment.
Alex (ActiveWidgets)
August 6,
My code above works fine too at IE7 or IE8 Compatibility View. The problem occurs on IE8 Standards mode (Compatibility View off).

Are you sure you tested it on 2.5.3 and IE8 Standards mode?

Thanks,
mrhsh
August 6,
Yes, here is the code which I was looking at -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script src="../../runtime/lib/aw.js"></script>
    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>

</style>
<script>

var grid=new AW.UI.Grid;
var header=["Col-1"," Col-2"," Col-3"," Col-4"," Col-5"," Col-6"," Col-7"," Col-8"," Col-9"," Col-10"," Col-11"];
grid.setId("grid");
grid.setHeaderText(header);
grid.getHeaderTemplate().setStyle("text-align", "center");
grid.setColumnCount(11);
grid.setRowCount(1);
grid.setStyle("width", "100%");
grid.setStyle("height", "38px");
grid.getCellTemplate().setStyle("border-right", "1px solid #c0c0c0");
grid.getCellTemplate().setStyle("padding-right", "3px");
grid.setCellEditable(true);
grid.setColumnWidth(150, 0);
grid.setColumnWidth(50, 1);
grid.setColumnWidth(150, 2);
grid.setColumnWidth(50, 3);
grid.setColumnWidth(150, 4);

var tempWidth=document.body.offsetWidth; //screen width.

for(var i=0; i<grid.getColumnCount()-1; i++)
    tempWidth-=grid.getColumnWidth(i);

if(tempWidth<200){//for narrow screen:
    tempWidth=200;
    grid.setStyle("height", "56px");
}

grid.setColumnWidth(tempWidth, 10);

document.write(grid);

</script>
</body>
</html>
Alex (ActiveWidgets)
August 6,
I figured out the problem.

As my code above, I used “tempWidth=document.body.offsetWidth;” to determine the display windows’ width. I embedded “alert(tempWidth);” and found out the tempWidth=1239 in IE7, and tempWidth=1260 in IE8, at my test screen. The difference may be the width of vertical scroll bar. In IE7, the vertical scroll bar is always displayed (but not active if not necessary). In IE8, the vertical scroll bar is dynamically loaded, I guess.

So, my question now is how to dynamically determine the display window’s width in IE8.

Any idea?

Thanks,
mrhsh
August 6,

This topic is archived.

See also:


Back to support forum