JavaScript getClientRects() does not work in Content Page

[CVMichael]

I have a aspx page with a table with scrollable rows.
I achived this by having a "header" table, and a "rows" table. The rows table has a div with "overflow:auto" so get the scroll bar.

When data is loaded in the rows table, the columns have diferent sizes, and since the columns are not fixed width, the header columns don't match with rows columns.

To fix this, using JavaScript, I loop through the first row in the "rows" table, and I call the getClientRects() function to get the cell bownds, calculate the column width and assign that value to the header table columns.

This works perfectly when I use a regular aspx page. I decided to switch to a master-content achitecture, because I have a tab menu at the top of the page, and I copied and pasted the code into the content page.

Everything works fine, but the getClientRects() returns all values as 0 (zeros).


So how can I get the getClientRects() to return the propper values ?



Here is the relevant code:

<script language="JavaScript" type="text/javascript">
    function SetTableColWidth() {
        var th = document.getElementById("tbl_SearchResult_Header");
        var tr = document.getElementById("tbl_SearchResult_Rows");
 
        if (tr != null) {
            if (tr.rows.length > 0) {
                for (i = 0; i < 7; i++) {
                    rcts = tr.rows[0].children[i].getClientRects();
                    th.rows[1].children[i].style.width = (rcts[0].right - rcts[0].left) + "px";
                }
 
                for (i = 0; i < 7; i++) {
                    rcts = th.rows[1].children[i].getClientRects();
                    tr.rows[0].children[i].style.width = (rcts[0].right - rcts[0].left) + "px";
                }
            }
        }
    }
</script>
 
 
<table id="tbl_SearchResult_Header" cellpadding="2" cellspacing="1" width="750px" style="background: #99B4F1; padding: 0px; border-style: solid solid none solid; border-width: 2px; border-color: #000000">
<tr class="SectionTableTitle">
    <td colspan="7">Search results</td>
</tr>
<tr class="SectionTableTitle">
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
</tr>
</table>
<div style="width:770px;height:255px;overflow:auto;">
<asp:Repeater ID="rptSearchResults" runat="server">
<HeaderTemplate>
    <table id="tbl_SearchResult_Rows" cellpadding="2" cellspacing="1" width="750px" style="background: #99B4F1; padding: 0px; border-style: none solid solid solid; border-width: 2px; border-color: #000000">
</HeaderTemplate>
<ItemTemplate>
    <tr align="left" bgcolor='#E0E0E0'
            onmouseover="this.bgColor='#C8C8C8'" onmouseout="this.bgColor='#E0E0E0'"
            onclick="SubmitChoice(<%#Container.DataItem("aaaaaaaaaa_ID")%>);" style="cursor:pointer;">
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td align="center"><%#Container.DataItem("aaaaaaaaaa")%></td>
    </tr>
</ItemTemplate>
<AlternatingItemTemplate>
    <tr align="left" bgcolor='#F0F0F0'
            onmouseover="this.bgColor='#C8C8C8'" onmouseout="this.bgColor='#F0F0F0'"
            onclick="SubmitChoice(<%#Container.DataItem("aaaaaaaaaa_ID")%>);" style="cursor:pointer;">
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td align="center"><%#Container.DataItem("aaaaaaaaaa")%></td>
    </tr>
</AlternatingItemTemplate>
<FooterTemplate>
    </table>
</FooterTemplate>
</asp:Repeater>
</div>
 
 
<script language="JavaScript" type="text/javascript">
        SetTableColWidth();
</script>

I attached an image to get an idea how it looks (when it works)