:: Forum >>

Grid losing focus in FireFox

I am showing a grid in a div used in a multi-tab kind of display. If we scroll down the grid then changing the tab (which make the grid not visible) and coming back the grid has lost its focus and is displaying row 1 or gird is empty and I need to click on it to make something displayed. Works perfectly in IE but not in FireFox. AW version 2.0.1

Can anybody help ?
Serge Bouchard
Tuesday, March 4, 2008
Can you try it with AW 2.5.1?
Wednesday, March 5, 2008
Just did it... same results
Serge Bouchard
Wednesday, March 5, 2008
Can you post a snapshot of your code? We need reprocude it.

Paulo Cesar (PC from Brazil)
Wednesday, March 5, 2008
Just try the following code in IE and FF. Scroll down to the middle of the grid, click on block02 and come back to block01. In IE it will come back at the previous scrolling position and in FF it will at best come back to the beginning of the grid but most of the time the grid is empty and you need to move the slider a little to get the first rows.


<script src="aw/lib/aw.js"></script>
<link href="aw/styles/xp/aw.css" rel="stylesheet"></link>

.#myGrid .aw-column-0 {width: 150px;"});
.#myGrid .aw-column-1 {width: 150px;"});
.#myGrid .aw-column-2 {width: 150px;"});
.#myGrid .aw-column-3 {width: 150px;"});


function init() {
var myData = new Array(100);

for (var i=0;i<100;i++) {
var row = new Array(4);
row[0] = "Fld1-" + (i+1);
row[1] = "Fld2-" + (i+1);
row[2] = "Fld3-" + (i+1);
row[3] = "Fld4-" + (i+1);
myData[i] = row;
var myHeaders = ["Fld1", "Fld2", "Fld3", "Fld4"];

var obj = new AW.Grid.Extended;



obj.setSelectorText(function(i){return this.getRowPosition(i)+1});
var div = document.getElementById("grid01");
div.innerHTML = obj;

function block01() {

document.getElementById("block02").style.display = "none";
document.getElementById("block01").style.display = "block";
function block02() {

document.getElementById("block01").style.display = "none";
document.getElementById("block02").style.display = "block";
<body onload="init();">
<div style="display: block" id="block01">
<div id="grid01"></div>
<div style="display:none" id="block02">
<h1>Here is block 02</h1>
<input type="button" value="Block01" onclick="block01();">
<input type="button" value="Block02" onclick="block02();">
Serge Bouchard
Wednesday, March 5, 2008
It seems that Firefox clears scroll position when the element goes inside display:none area and does not restore it when the element becomes visible again. You can fix it forcing the grid to apply it current scroll offsets -

function block01() {

document.getElementById("block02").style.display = "none";
document.getElementById("block01").style.display = "block";

Alex (ActiveWidgets)
Wednesday, March 5, 2008
Actually, that doesn't quite work. I changed the code Serge had to use a z-index (stacking order) rather than a display style. This shows what's actually happening a little better.

And what happens is that the grid positions are lost as soon as the "block01" DIV is moved away from. Moving back to it simply get the existing top and left scroll positions. Which means it doesn't actually change.

To fix this, make obj a global var and add two more global variables. Vis -
var obj
var oldleft, oldtop

function init()

Then change the two block functions to -
function block01()
document.getElementById("block02").style.display = "none"
document.getElementById("block01").style.display = "block"

function block02()
oldtop = obj.getScrollTop()
oldleft = obj.getScrollLeft()
document.getElementById("block01").style.display = "none"
document.getElementById("block02").style.display = "block"
Wednesday, March 5, 2008
Thanks everyone.
Serge Bouchard
Thursday, March 6, 2008
I just discovered that the same thing happens when the following float style is removed from a grid -
obj.setStyle("float", "left")
I suspect its related (even though float positioning and visibility aren't) but I haven't tested to confirm.
Saturday, April 12, 2008

This topic is archived.

Back to support forum

Forum search