Layout problems on IE 9.0

I'm having a problem with the grid with IE 9: the scroll bars (vertical and horizontal) are positioned incorrectly over the data. For better understanding, I am posting below one link with the image of what is happening :

http://189.19.214.34/ScrollProblems.jpg

My code is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">

<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Transações</title>
<link rel="stylesheet" type="text/css" href="../css/styles.css" /><link rel="stylesheet" type="text/css" href="../activewidgets/runtime/styles/vista/aw.css" />
<script type="text/javascript" language="javascript" src="../activewidgets/runtime/lib/aw.js"></script>
<script type="text/javascript" language="javascript" src="../scripts/AjaxRequestJS.aspx"></script>
<script type="text/javascript" language="javascript" src="../scripts/JScripts.js"></script>



<style type="text/css">

#grid1 {width: 500px; height: 500px; border: 2px inset; background: white}

#grid1 .aw-column-0 {width: 50px;}
#grid1 .aw-column-1 {width: 250px;}
#grid1 .aw-column-2 {width: 400px;}
#grid1 .aw-column-3 {width: 120px;}
#grid1 .aw-column-4 {width: 120px;}
#grid1 .aw-column-5 {width: 120px;}
#grid1 .aw-column-6 {width: 120px;}

#grid1 .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
#grid1 .aw-grid-cell {border-right: 1px solid threedlightshadow;}

#grid1 .aw-mouseover-row {background-color: #bce4f9}
#grid1 .aw-rows-selected {background-color: #000080}

#buttonNew {width: 90px}
#buttonEdit {width: 90px}
#buttonDelete {width: 90px}
#buttonSearch {width: 90px}
#buttonExit {width: 90px}

</style>



<script type="text/javascript" language="javascript">

var vGridColumns = ['ID','Código','Descrição','Criado em','Criado por','Alterado em','Alterado por'];
var vColumnCount = new Number(7);

</script>

</head>

<body style="height: 100%; background-color: #E2F4FD">

<form name="form1" method="post" action="transacoes.aspx" id="form1">

<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTU2MzU3Njc3NWRk6hQ++l+nQFKgLxzPHMEb4RF4dz8iQ2+Qfdtg4ylN7yU=" />
</div>

<table border="0" cellpadding="0" style="border-collapse: collapse; width: 100%">
<tr>
<td>
<table border="0" cellpadding="0" style="border-collapse: collapse; width: 100%">
<tr>
<td class="FontSmallBlack" align="center" style="width: 100%">
<table border="0" cellpadding="0" style="border-collapse: collapse; width: 100%">
<tr>
<td class="FontNormalBlackBold" align="left" style="width: 100%">Cadastro de transações</td>
</tr>
<tr>
<td class="FontSmallBlack" align="center" style="width: 100%"> </td>
</tr>
<tr>
<td class="FontSmallBlack" align="left" style="width: 100%">
<script type="text/javascript" language="javascript">

var vCurrentKey = new String();
var vGridObject = new AW.Grid.Extended;

var vTable = new AW.XML.Table;
vTable.setURL(vWebServiceURL + "WSTabTransacao.asmx/LoadGridData");
vTable.setRequestMethod("POST");
vTable.setParameter("vWebServiceKey",vWebServiceKey);
vTable.setParameter("vField","");
vTable.setParameter("vValue","");
vTable.setParameter("vCondition","");
vTable.setRows("//NewDataSet/*");
vTable.setAsync(false);
vTable.request();

vGridObject.setId('grid1');

vGridObject.setHeaderText(vGridColumns);
vGridObject.setColumnCount(vGridColumns.length);
vGridObject.setRowCount(vTable.getCount());
vGridObject.setCellModel(vTable);

if (vTable.getCount() <= 250)
{
vGridObject.setVirtualMode(false);
}
else
{
vGridObject.setVirtualMode(true);
}

vGridObject.refresh();

vGridObject.setSelectionMode('single-row');

var vKeySet = function(event,rowIndex)
{
try
{
vCurrentKey = this.getCellText(0,vGridObject.getCurrentRow());
}
catch(error)
{
vCurrentKey = '';
}
}

vGridObject.onSelectedRowsChanged = vKeySet;
vGridObject.onCellDoubleClicked = Edit;

document.write(vGridObject);

</script>
</td>
</tr>
<tr>
<td class="FontSmallBlack" align="center" style="width: 100%"> </td>
</tr>
<tr>
<td class="FontSmallBlack" align="center" style="width: 100%">
<table border="0" cellpadding="0" style="border-collapse: collapse; width: 100%">
<tr>
<td class="FontSmallBlack" align="left" style="width: 85%">
<table border="0" cellpadding="0" style="border-collapse: collapse; width: 100%">
<tr>
<td style="width: 12%">
<span id="buttonNew"></span>
<script type="text/javascript" language="javascript">
var obj1 = new AW.UI.Button;
obj1.setId("buttonNew");
obj1.setControlText("<img src=../images/toolbar/new.png></img> Novo");
obj1.setControlTooltip("Novo registro");
obj1.onClick = New;
obj1.refresh();
</script>
</td>
<td style="width: 12%">
<span id="buttonEdit"></span>
<script type="text/javascript" language="javascript">
var obj2 = new AW.UI.Button;
obj2.setId("buttonEdit");
obj2.setControlText("<img src=../images/toolbar/edit.png></img> Editar");
obj2.setControlTooltip("Editar registro");
obj2.onClick = Edit;
obj2.refresh();
</script>
</td>
<td style="width: 12%">
<span id="buttonDelete"></span>
<script type="text/javascript" language="javascript">
var obj3 = new AW.UI.Button;
obj3.setId("buttonDelete");
obj3.setControlText("<img src=../images/toolbar/delete.png></img> Apagar");
obj3.setControlTooltip("Apagar registro");
obj3.onClick = Delete;
obj3.refresh();
</script>
</td>
<td style="width: 12%">
<span id="buttonSearch"></span>
<script type="text/javascript" language="javascript">
var obj4 = new AW.UI.Button;
obj4.setId("buttonSearch");
obj4.setControlText("<img src=../images/toolbar/search.png></img> Pesquisar");
obj4.setControlTooltip("Pesquisar registros");
obj4.onClick = Search;
obj4.refresh();
</script>
</td>
<td style="width: 12%">
<span id="buttonExit"></span>
<script type="text/javascript" language="javascript">
var obj5 = new AW.UI.Button;
obj5.setId("buttonExit");
obj5.setControlText("<img src=../images/toolbar/Exit.png></img> Voltar");
obj5.setControlTooltip("Voltar");
obj5.onClick = Close;
obj5.refresh();
</script>
</td>
<td style="width: 14%"> </td>
<td style="width: 14%"> </td>
</tr>
</table>
</td>
<td class="FontSmallBlack" align="right" style="width: 10%">Total de Registros :</td>
<td class="FontSmallBlack" align="right" style="width: 5%">
<label id="LabelRecCount" name="LabelRecCount" class="FontSmallBlack" style="text-align: right"></label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="FontSmallBlack" align="center" style="width: 100%"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

</form>

</body>

</html>

<script type="text/javascript" language="javascript">

// Ajusta o Tamanho dos Objetos da Tela

window.onload = function()
{
WindowResize();
}

window.onresize = function()
{
WindowResize();
}

function WindowResize()

{

try

{

// Passo 1 -> Ajusta o Tamanho da Grid

var vDocHeight = new String(document.body.clientHeight);
var vDocWidth = new String(document.body.clientWidth);

vDocHeight = vDocHeight.replace('px','');
vDocWidth = vDocWidth.replace('px','');
vDocHeight = (parseInt(vDocHeight) - 80).toString();
vDocWidth = (parseInt(vDocWidth) - 2).toString();

vGridObject.setSize(vDocWidth,vDocHeight);

}

catch(error)

{
}

}

</script>

This behavior only happens in IE 9.0. In Chrome, Safari, Firefox and Opera works the grid works fine. I´m using the developer version 2.5 of ActiveWidgets. Has anyone had this problem?

Thank you.

Hi ! Please, anybody can help me with this issue ?

Thanks !

It looks like grid initialization procedure (which also calculates the position of the scrollbars) is confused by your resizing code. Please try the following

1. Remove vGridObject.refresh(); - it does not make any sense to refresh before you write the grid into the page.
2. Add a 1-2 sec delay into window.onload function, which resizes the grid.

Alex,

Thanks for your answer, I apply your suggestion, but still not working. I don´t think the resize procedure is the problem, because all grids on system haves the same behavior, with resize procedure or not. And this behavior occurs only in IE9, the other browsers (Mozilla, Chrome, Opera and Safari) works perfectly.

Thanks again

I was trying to run your code but I cannot reproduce the issue. Maybe it is related to the missing stylesheet? Could you send me a complete sample (client-side code only pls) which I can run locally or give me access to the original page?

Forum search