Scrolling / Grid height bug when grid not first thing in window.

Hi.

Struggling at the moment with a problem with the grid when it's not the first thing in the page.

Tested with Grid 1.0.1, Browsers IE5, IE6, and Firefox 1.0.4.

I have a table (one row only, used as a header) inside a window. This is followed immediately by a grid. The table is 25px high.

I have scrolling enabled on the grid, but whenever I have more items in the grid that can be displayed without scrolling, it only draws the scrollbars when I have resized the page to 25px up the grid control, and won't scroll down to see the last 25px of the grid (about 1.5 rows).

So the grid isn't taking into account its vertical offset and actual screen real-estate when it calculates its own height for scrolling.

Any ideas?

Adrien de Croy

July 7,

More on this one.

The browser seems to be setting various height values wrong.

The clientHeight and offsetHeight properties of obj.element() do not account for the offsetTop value (i.e. is not reduced by it), so when the grid resizes, it gets the wrong values from the browser.

Putting the grid in a <DIV> or anything else seems to make no difference.

can anyone help shed some light on this?

Adrien de Croy

July 7,

OK, if I put the two main sections into a table (where the grid is wrapped in a <DIV> tag as well) then it works... in IE only.

In Firefox, the grid won't display. As you resize the page, you see the top column headers and scrollbar, but it disappears as soon as you stop resizing.

Also the reported client areas in Firefox and IE are different for the grid.element(). IE resets the parent offsets to 0, and reduces the client height. Firefox does not set the parent offset to zero (I reckon that's a bug in Firefox).

Also in Firefox, I don't get a full width of column headers - only the last one, then a few strange pixels (like a clipped column header). Not very good looking - the row backgrounds (alternating) scroll up into this empty area.

Any chance these issues will be fixed in 2.0? I would pay good money to have this fixed, I have been beating my head against this for too long now.

Adrien de Croy

July 7,

The position of the grid on the page has no bearing to how it behaves. I routinely place many grids all over the page and they are NEVER the first 'thing' on a page. Please post a code sample so we can see exectly what you are doing here. There must be something that can be done to eleviate your distress.

Jim Hunter

July 8,

OK, here it is. Thanks! This shows up fine in IE, but in Firefox, no way. Also, note no doc type. This is normally inside a frame. If I give it a doc type, it doesn't show in IE either.

Adrien

<html>
<head>
<title>Wingate Mail mailbox view</title>

<link href="ActiveWidgets/runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="ActiveWidgets/source/lib/grid.js"></script>
<SCRIPT SRC="script1.js"></SCRIPT>
<SCRIPT>

</SCRIPT>

<style>
* {-moz-box-sizing: border-box; overflow: hidden;}
.active-templates-header { font-weight: bold; font-family: verdana; color: 002455; font-size:12px; height:21px;}
.active-scroll-top, .active-scroll-corner {height: 21px}
.active-scroll-left, .active-scroll-data {padding-top: 21px}
.active-column-0 {width:30px;}
.active-column-1 {width:240px;}
.active-column-2 {width:120px;}
.active-column-3 {width:80px;}
.active-column-4 {width:40px;}
.active-column-5 {width:300px;}
.active-scroll-left, .active-scroll-corner {display: none}
.active-scroll-top, .active-scroll-data {padding-left: 0px}
.active-scroll-left .active-templates-item,
.active-scroll-data .active-templates-row {height: 19px; font-family:verdana; font-size:11px; vertical-alignment:bottom;}
</style>

</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onFocus="SetFocus()" onLoad="SetFocus()">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height:25px;">
<td>
<div id="titlebar" style="width:100%; height:25px; background-color:#002455; padding-top:1px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr style="background-color:#002455;">
<td nowrap valign="center" align="left" style="padding-left:6px;" class="white12bold">
<img src='pics/small_folder.gif' width='11' height='8' border='no'>  INBOX : 258 msgs 75 unread </td>
<td width="35%" align="left" valign="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<form name="form_move" style="margin:0px;">
<tr valign="middle">
<td width="30%"><img src="pics/buttons/delete_selected.gif" width="123" height="19" border="0" onclick="TrashMessages()" style="cursor:hand;"></td>
<td width="30%"><select name="moveMsg" class="inputField" id="select2">
<option selected>move to folder...</option>
<option value='Inbox'>Inbox</option><option value='Sent'>Sent</option><option value='Drafts'>Drafts</option><option value='Trash'>Trash</option><option value='Digital Island'>Digital Island</option><option value='Paz'>Paz</option><option value='personal'>personal</option><option value='Dev'>Dev</option><option value='Qbik Team'>Qbik Team</option><option value='Jokes'>Jokes</option><option value='SPF-Devel'>SPF-Devel</option><option value='sarah'>sarah</option><option value='activation'>activation</option><option value='jennie'>jennie</option><option value='Jeremy'>Jeremy</option><option value='BDO'>BDO</option><option value='Matt P'>Matt P</option><option value='NBNZ'>NBNZ</option><option value='Siren'>Siren</option><option value='testing'>testing</option> </select>
</td>
<td width="40%" style="cursor:hand" onClick="MoveMessages()" class="white12bold"> go</td>
</tr>
</form>
</table>
</td>
<td width="*" align="right" valign="middle">
<table width="160" border="0" cellspacing="0" cellpadding="0">
<form name="SetTopPageForm" method="POST" action="main_list.php" id="SetTopPageForm" style="margin:0px;">
<input id="set_meth" name="set_meth" type="hidden" value="1">
<tr style="vertical-align:center;">
<td align="left">
<img src="pics/buttons/page_back.gif" width="15" height="18" border="0" style="cursor:hand;" onClick="SetPage(1)">
<img src="pics/buttons/page_back1.gif" width="15" height="18" border="0" onClick="SetPage(0)" style="cursor:hand;">
<td align="left" class="white12bold">
<input id="curpage" name="curpage" type="text" class="inputField" size="2" value="1"> of 26 </td>
<td align="left">
<img src="pics/buttons/page_foward1.gif" width="15" height="18" border="0" onClick="SetPage(2)" style="cursor:hand;">
<img src="pics/buttons/page_foward.gif" width="15" height="18" border="0" onClick="SetPage(26)" style="cursor:hand;">
</td>
</tr>
</form>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:100%; height:100%; ">
<SCRIPT>
var mail_columns = [
"",
"From",
"Date",
"Size",
"",
"Subject"
];

var mail_data = [
[
"<img src=\"pics/icons/read.gif\" alt=\"Read\">",
"nuevosnumeros@argentina.com",
"12 Jul 05 09:23:23",
"9642",
"",
"[spam] NUEVOS NUMEROS TELEFONICOS",
"2912"
],
[
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"Matt Parker",
"12 Jul 05 08:56:45",
"2946",
"",
"Re:",
"2910"
],
[
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"inneedofhelp",
"12 Jul 05 08:49:39",
"3188",
"",
"[spam] [none]",
"2909"
],
[
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"inneedofhelp",
"12 Jul 05 08:51:46",
"3289",
"",
"",
"2908"
],
[
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"Tuatara Management Limited",
"12 Jul 05 09:26:45",
"63333",
"",
"",
"2906"
],
[
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"CD Landia",
"12 Jul 05 10:30:33",
"11298",
"",
"[spam] Ofrecemos la nueva base de mails argentinos 2005 con programas de envio",
"2905"
],
[
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"James",
"12 Jul 05 07:33:57",
"1816",
"",
"[spam] Let your computer be the PRO!",
"2896"
],
[
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"Vanessa J. Smith",
"12 Jul 05 07:14:44",
"4894",
"",
"[spam] Macromedia Studio MX 2004 - 75% OFF",
"2895"
],
[
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"Vanessa J. Smith",
"12 Jul 05 07:09:20",
"4743",
"",
"[spam] Office software - duty-free prices",
"2894"
],
[
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"Vanessa J. Smith",
"12 Jul 05 07:13:43",
"4813",
"",
"[spam] Windows XP - wholesale price",
"2893"
],
];

function OnEnter(theObj)
{
var nSelected = theObj.getSelectionCount();
var array = theObj.getSelectionProperty("values");
for (var i = 0; i < nSelected; i++)
{
doubleClick('mail_popup.php?mailbox=Inbox' + '&id=' + mail_data[array[i]][6]);
}
}

function HookKeyDown(theObj, event)
{
switch(event.keyCode)
{
case 32:
case 13: // enter key
OnEnter(theObj);
return false;
case 16: // shift key
case 17: // ctrl key
case 18: // alt key
case 33:
case 34:
case 35:
case 36:
return true;
case 38: // up arrow
if (event.shiftKey)
{
// ok, this is the current selected row (by cursor)
var index = GridObj.getSelectionProperty("index");
// grid may be sorted, so get the display order for that row
var order = GridObj.getRowProperty("order", index );
// OK, this is up arrow, so new order will be one less.
var newOrder = Number(order) - 1;
// can't go less than 0
if (newOrder<0)
return false;

var newIndex = GridObj.getRowProperty("value", Number(order)+1);

// OK, so we calculate the index of the preceding row by order
// GridObj.setSelectionProperty("index", newIndex);

theObj = GridObj.getRowTemplate(newIndex);
theObj.action("selectMultipleRows");

return true;
}
return true;
case 40: // down arrow
if (event.altKey)
OnEnter(theObj);
if (event.shiftKey)
{
// how many rows?
var count = GridObj.getRowProperty("count");
// OK, this is up arrow, so new order will be one less.
var newOrder = Number(order) +1;
// can't go less than 0
if (newOrder>=count)
return false;

}
return true;
case 46: // delete key
MoveSelectedToFolder("Trash");
return false;
case 65: // Ctrl-A (select all)
if(event.ctrlKey)
{
var all = GridObj.getProperty("row/values");
GridObj.setProperty("selection/values", all);
GridObj.setSelectionCount(GridObj.getRowProperty("count"));
GridObj.refresh();
}
return true;
case 78:
if(event.ctrlKey) // Ctrl-N (compose)
{
open_win('popup_compose.php?action=compose', 570, 520, 'yes', 'yes');
return false;
}
case 82:
if(event.ctrlKey) // Ctrl-R (reply)
{
var rowId = GridObj.getSelectionProperty("index");
var UID = mail_data[rowId][6];

if(event.shiftKey)
window.open('popup_compose.php?action=reply_all&id=' + UID, "_blank");
else
window.open('popup_compose.php?action=reply&id=' + UID, "_blank");

return false;
}
default:
alert(GridObj.element().offsetTop + ", " + GridObj.element().offsetHeight + ", " + GridObj.element().clientHeight);
}
return true;
}

function HookClick(theRow, event)
{
var rowid = theRow.getRowProperty("index");
var UID = mail_data[rowid][6];
map = window.open('mail.php?folder=Inbox&id=' + UID, "mailFrame");
return true;
}

GridObj.setRowCount(10);
GridObj.setColumnCount(6);
GridObj.setDataText(function(i, j){return mail_data[i][j]});
GridObj.setColumnText(function(i){return mail_columns[i]});
GridObj.setSelectionProperty("multiple", true);

var row = new Active.Templates.Row;
var alternate = function()
{
return this.getRowProperty("order") %2 ? "#D7E0EF" : "#FFFFFF";
}

row.setStyle("background", alternate);
row.setEventHook("onclick", "HookClick");
GridObj.setEventHook("onkeydown", "HookKeyDown");

GridObj.setTemplate("row", row);

function MoveSelectedToFolder(folder)
{
var nSelected = GridObj.getSelectionCount();
var array = GridObj.getSelectionProperty("values");

var selectionList = "";

for (var i = 0; i < nSelected; i++)
{
selectionList += " " + mail_data[array[i]][6];
}

if(nSelected)
{
document.form1.selList.value = selectionList;
document.form1.to_folder.value = folder;
document.form1.submit();
}
}

function GetImgTagForStatus(strStatus)
{
var strImg = "1pix.gif";
switch (strStatus)
{
case "Unread":
strImg = "icons/unread.gif";
break;
case "Read":
strImg = "icons/read.gif";
break;
case "Replied":
strImg = "icons/reply.gif";
break;
case "Redirected":
strImg = "icons/forward.gif";
break;
case "Forwarded":
strImg = "icons/forward.gif";
break;
case "Drafted":
strImg = "icons/drafted.gif";
break;
case "Send":
strImg = "icons/send.gif";
break;
case "Sent":
strImg = "icons/sent.gif";
break;
}

var strRet = "<img src=\"pics/"+strImg+"\" alt=\"" + strStatus + "\">";
return strRet;
}

function GetRowForUID(theUID)
{
var nRows = GridObj.getRowCount();
for (var i = 0 ; i < nRows ; i++)
{
if (mail_data[i][6] == theUID)
return i;
}
return -1;
}

document.write(GridObj);

function SetMessageStatus(UID, strStatus)
{
var nID = GetRowForUID(UID);
if(nID != -1)
{
mail_data[nID][0] = GetImgTagForStatus(strStatus);
GridObj.getRowTemplate(nID).refresh();
}
}
</script>
</div>
</td>
</tr>
</table>
<form name="form1" action="main_list.php" method="post" style="margin-top:0px; margin-bottom:0px">
<input name="curpage" type="hidden" id="curpage" value="1">
<input name="selList" type="hidden" id="selList">
<input name="to_folder" type="hidden" id="folder">
<input name="from_folder" type="hidden" id="mailbox" value="Inbox">
</form>
<form name="SetPageForm" action="main_list.php" method="post" id="SetPageForm" style="margin:0px;">
<input name="curpage" type="hidden" id="curpage">
</form>
</body>
</html>

Adrien de Croy

July 11,

PS, if I set the grid height in absolute pixels, then it displays fine, but that's no use to me, I need it to be resizable, and take the remainder of the page it's in.

Thanks

Adrien

Adrien de Croy

July 11,

I had problems my self when I tried to make it resizable I just placed the grid in a IFRAME instead so it didn't have a prob. then again that isn't a solution just a work around :)

July 13,

Adrien,

I have a few issues with your sample code since I don't have your modified (I assume) copy of grid.js and I do not have your CSS file. Without them, I do not see an issue. So the problem might be in your CSS file. If you post your e-mail address I will contact you and you can send me your CSS file and JS file so I can see exactly the same thing you see.

Jim Hunter

July 13,

Thanks

My email is adrien at qbik dot com

Cheers

Adrien

PS, I haven't touched the grid CSS file, unless you mean the main one? You think there could be some sort of name collision between our general one and the grid one?

PPS, yes I did modify Grid.js to allow for the hooking functions. Works a treat. When I revert though it doesn't make any difference, but I can post you the modified code as well if you like. Thanks again for your help

Adrien de Croy

July 16,

I'm stuck, how do i create a scrolling window the links in javascript that when you mouse over it stops and carries on when mouse is off

Ehtisham

August 27,

still no solution for this one..? I have the same problem. some nested divs with the grid below another html element. It seems the grid is taking the 100% height from the parent div...
even if I set the numRows of the grid less, it doesnt make a difference... who can help?

September 15,

Start simple and then work up. here is an example of what you want. I stripped out of the extra code that wasn't needed to demonstrate the technique. Try it out and see if it does what you want.

<html>
<head>
<title>Wingate Mail mailbox view</title>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="ActiveWidgets/runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="ActiveWidgets/source/lib/grid.js"></script>
<SCRIPT SRC="script1.js"></SCRIPT>
<SCRIPT>
<!--
GridObj = new Active.Controls.Grid;

// End -->
</SCRIPT>

<style>
* {-moz-box-sizing: border-box; overflow: hidden;}
.active-templates-header { font-weight: bold; font-family: verdana; color: 002455; font-size:12px; height:21px;}
.active-scroll-top, .active-scroll-corner {height: 21px}
.active-scroll-left, .active-scroll-data {padding-top: 21px}
.active-column-0 {width:30px;}
.active-column-1 {width:240px;}
.active-column-2 {width:120px;}
.active-column-3 {width:80px;}
.active-column-4 {width:40px;}
.active-column-5 {width:300px;}
.active-scroll-left, .active-scroll-corner {display: none} 
.active-scroll-top, .active-scroll-data {padding-left: 0px}
.active-scroll-left .active-templates-item,
.active-scroll-data .active-templates-row {height: 19px; font-family:verdana; font-size:11px; vertical-alignment:bottom;}
</style>

</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" onFocus="SetFocus()" onLoad="SetFocus()">
<table style="border:2 solid green;height:100%;width:100%;position:absolute">
  <tr style="height:30;width:100%;border:1">
    <td style="width:100%;height:30">
      <div style="top:0;height:30;width:100%;background-color:navy"></div>
    </td>
  </tr>
  <tr style="height:*;widht:100%">
    <td>
      <div id=gridDiv style="height:100%;width:100%"></div>
    </td>
  </tr>
</table>

<SCRIPT>
var mail_columns = [ 
"",
"From",
"Date",
"Size",
"",
"Subject"
];

var mail_data = [
[ 
"<img src=\"pics/icons/read.gif\" alt=\"Read\">",
"nuevosnumeros@argentina.com",
"12 Jul 05 09:23:23",
"9642",
"",
"[spam] NUEVOS NUMEROS TELEFONICOS",
"2912"
], 
[ 
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"Matt Parker",
"12 Jul 05 08:56:45",
"2946",
"",
"Re:",
"2910"
], 
[ 
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"inneedofhelp",
"12 Jul 05 08:49:39",
"3188",
"",
"[spam] [none]",
"2909"
], 
[ 
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"inneedofhelp",
"12 Jul 05 08:51:46",
"3289",
"",
"",
"2908"
], 
[ 
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"Tuatara Management Limited",
"12 Jul 05 09:26:45",
"63333",
"",
"",
"2906"
], 
[ 
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"CD Landia",
"12 Jul 05 10:30:33",
"11298",
"",
"[spam] Ofrecemos la nueva base de mails argentinos 2005 con programas de envio",
"2905"
], 
[ 
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"James",
"12 Jul 05 07:33:57",
"1816",
"",
"[spam] Let your computer be the PRO!",
"2896"
], 
[ 
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"Vanessa J. Smith",
"12 Jul 05 07:14:44",
"4894",
"",
"[spam] Macromedia Studio MX 2004 - 75% OFF",
"2895"
], 
[ 
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"Vanessa J. Smith",
"12 Jul 05 07:09:20",
"4743",
"",
"[spam] Office software - duty-free prices",
"2894"
], 
[ 
"<img src=\"pics/icons/unread.gif\" alt=\"Unread\">",
"Vanessa J. Smith",
"12 Jul 05 07:13:43",
"4813",
"",
"[spam] Windows XP - wholesale price",
"2893"
], 
];


GridObj.setRowCount(10);
GridObj.setColumnCount(6);
GridObj.setDataText(function(i, j){return mail_data[i][j]});
GridObj.setColumnText(function(i){return mail_columns[i]});
GridObj.setSelectionProperty("multiple", true);

var row = new Active.Templates.Row;

GridObj.setStyle("height", "100%");
GridObj.setStyle("width", "100%");

//document.write(GridObj);
document.getElementById("gridDiv").innerHTML = GridObj;

</script>
</body>
</html>

Jim Hunter

September 16,

This topic is archived.

Scrolling / Grid height bug when grid not first thing in window.

See also:

Search

New Data Grid

Version 2