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 cant 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 grids 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 windows width in IE8.

Any idea?

Thanks,

mrhsh

August 6,

This topic is archived.

Can't set grid's height on IE8?

See also:

Search

New Data Grid

Version 2