ASP.Net UpdatePanel doesn't update document height (C#/jQuery/GridView)

ikoonman

Hi

On an ASPX I have a sticky footer (http://johnpatrickgiven.com/jquery/pinned-footer/) NOT set to relative, which remains visible at the bottom even if the user scrolls down. This is working fine as expected, but I am having a problem.

On my ASPX I have an UpdatePanel with GridView (set to invisible) inside the panel.

<asp:ScriptManager ID="scriptManager" runat="server">
        </asp:ScriptManager> 
        <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                 .... form fields
<div style="padding-bottom:20px;">
                <asp:Panel ID="panelTest" runat="server" Visible="false" style="display:block;">
                    <asp:GridView ID="gridTest" runat="server" AutoGenerateColumns="true"></asp:GridView>
                </asp:Panel>
                </div>
                <div id="footer" style="width:100%;height:50px; background-color:#c3c3c3;">footer</div>
            </ContentTemplate>
        </asp:UpdatePanel>

Once a user interacts with the form, and submit it via partial postback, the result makes the panel/gridview visible to reflect data based on user input.

The problem is that the document/window height doesn't get updated so a part of the grid is hidden behind the footer.

I have tried various techniques to update/reinitialise the stick-footer position in, for example, the code-behind Page_Load/PreRender events

if (!IsPostBack) 
{
      ScriptManager.RegisterStartupScript(updatePanel, updatePanel.GetType(), "pf", "pinFooter();", true);
}

as well as using

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

on the client-side via jQuery, but the document height remains the same before and after the partial postback but the actual content grows.

It is driving me absolutely mad and Google doesn't yield results relevant to my issue. I have no javascript errors in the Errors Console so the scripts seems fine.

Any advice or pointers will be appreciated!

EDIT: The problem behaviour persists on Chrome, FF and IE

Overflow

I dont understand why you are using that plugin if you are just setting it to relative. In that case why dont you just make the footer part of the normal document flow and scrap that plugin.

ikoonman

D'oh! Apologies, that was a typo. It is meant to read - NOT set to relative.

Giblet

Scrap the plugin, set it to position:fixed.

ikoonman

Giblet wrote: »

Scrap the plugin, set it to position:fixed.

Thanks. That worked. Also added "bottom=0;"

I guess sometimes you stare yourself blind ...