Hi guys n gals,
This is a rather obscure problem i am having and from what i understand it is rather advanced.
This involes a few things as follows:
A DIV tag to enable scrolling.
JavaScript to store and retrieve the current scrollbar position from a HiddenField control.
A GridView inside the div with a stylesheet to Freeze the header.
A ModalPopup with a stylesheet to make the backdrop semi-transparent when active.
The Issue:
The GridView header on a postback will be shifted above the DIV tag in accordance to the distance scrolled down.(Scroll 50px, the header will move up 50px beyond the Containing DIV)
This issue does NOT happen if i remove the filter:alpha(opacity=70); from the stylesheet.
The Repro Code:
I am binding the GridView to an ObjectCollection, this you will have to replace with your own Collection.
The StyleSheet:
.WrapperDiv {
overflow: auto;
width: 100%;
height: 200px;
}
.WrapperDiv TH {
position:relative;
}
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
}
The Code Behind:
Partial Class _Default
Inherits System.Web.UI.Page
#Region "Page Events"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim myObjectCollection As MyObjectCollection(True)
MyGrid.DataSource = myObjectCollection
MyGrid.DataBind()
Dim scriptManager As ClientScriptManager = Page.ClientScript
ScriptManager_ScrollLoader(scriptManager)
ScriptManager_ScrollSaver(scriptManager)
End Sub
#End Region
#Region "JavaScript Managers"
Public Sub ScriptManager_ScrollSaver(ByVal scriptManager As ClientScriptManager)
Dim csText As New StringBuilder()
Dim csType As Type = Me.GetType()
Dim csName As String = "saveScroll"
csText.Append("<script type=""text/javascript"">" + vbCrLf)
csText.Append("function SetScrollPos(sender, args) {" + vbCrLf)
csText.Append("document.getElementById('" + scrollLocation.ClientID + "').value = document.getElementById('" + AvailablePersonDiv.ClientID + "').scrollTop;" + vbCrLf)
csText.Append("}</script>")
If (Not scriptManager.IsClientScriptBlockRegistered(csType, csName)) Then
scriptManager.RegisterClientScriptBlock(csType, csName, csText.ToString(), False)
End If
End Sub
Private Sub ScriptManager_ScrollLoader(ByVal scriptManager As ClientScriptManager)
Dim csText As New StringBuilder()
Dim csType As Type = Me.GetType()
Dim csName As String = "loadScroll"
csText.Append("<script type=""text/javascript"">" + vbCrLf)
csText.Append("document.getElementById('" + AvailablePersonDiv.ClientID + "').scrollTop = document.getElementById('" + scrollLocation.ClientID + "').value;" + vbCrLf)
csText.Append("</script>")
If (Not scriptManager.IsStartupScriptRegistered(csType, csName)) Then
scriptManager.RegisterStartupScript(csType, csName, csText.ToString(), False)
End If
End Sub
#End Region
End Class
The Page:
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:Button runat="server" ID="hiddenTargetControlForPasswordChangeModalPopup" Style="display: none" />
<div id="AvailablePersonDiv" class="WrapperDiv" style="width: 100%;" runat="server" onscroll="SetScrollPos()">
<asp:HiddenField ID="scrollLocation" runat="server" />
<asp:GridView ID="AvailablePersonGoGrid" runat="server" Width="98%" AutoGenerateColumns="False"
CellPadding="1" ForeColor="#333333" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Left" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Center" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField HeaderText="Name" SortExpression="Name">
<itemtemplate>
<asp:Label ID="PersonLabel2" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</itemtemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Panel runat="server" CssClass="modalPopup" ID="passwordChangePopup" Style="display: none;
width: 500px; padding: 10px; background-color: whitesmoke; border-width: 3px;
border-style: solid; border-color: Gray; padding: 3px;">
<asp:Panel runat="Server" ID="Panel2" Style="cursor: move; background-color: Silver;
border: solid 1px Gray; color: Black; text-align: center;">
</asp:Panel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server" ID="passwordChangeModalPopup" BehaviorID="passwordChangeModalPopupBehavior"
TargetControlID="hiddenTargetControlForPasswordChangeModalPopup" PopupControlID="passwordChangePopup"
BackgroundCssClass="modalBackground" DropShadow="True" PopupDragHandleControlID="passwordChangePopupDragHandle">
</ajaxToolkit:ModalPopupExtender>
</form>
</body>
</html>
Any help on this would be great. I also hope the Code i presented will be easy to understand and give you a means to re produce the issue. The button on the page is the postback trigger. I have also tried to load various stylesheets at runtime, one sheet with the filter:alpha and one without. The one with the alpha would be loaded when the popup was requested, at which point the stylesheet switched and the header jumped :(.
Thank you,
Michael