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