Hi!
I am using AJAX RTM (1.0) and AjaxControlToolkit version 10301.
I have a page with a table and 3 rows (header, contents, footer). I have also a panel and a modal popup extender for it.
When I press the button and the ModalPopup is displayed, it adds an undesirable vertical space in my browser window, activating the vertical scrollbar.
See picture:
The following source code reproduces the problem:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXCTPEnabledWebApplication3._Default" %>
<%@ Register TagPrefix="AjaxControlToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit, Version=1.0.10301.0, Culture=Neutral, PublicKeyToken=28f01b0e84b6d53e" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ModalPopup test</title>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
background-color: #ffffff;
color: Black;
font-family: verdana, Arial, sans-serif;
}
#aspnetForm
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#mainTable
{
height: 100%;
width: 100%;
}
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
.modalPopup
{
background-color: #eff3fb;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 10px;
width: 300px;
height: 300px;
font-size: 12px;
}
</style>
</head>
<body>
<form id="aspnetForm" runat="server">
<asp:ScriptManager ID="scrMgr" runat="server" />
<table id="mainTable" cellpadding="0" cellspacing="0">
<tr id="header" style="height: 60px; background-color: gray;">
<td> </td>
</tr>
<tr id="contents">
<td>
<asp:Label ID="lblShow" runat="server" Text="Show" Font-Bold="true"></asp:Label>
</td>
</tr>
<tr id="footer" style="height: 60px; background-color: yellow;">
<td> </td>
</tr>
</table>
<asp:Panel ID="pnl" runat="server" CssClass="modalPopup" style="display:none;">
<asp:Button ID="btnHide" runat="server" Text="Hide" />
</asp:Panel>
<AjaxControlToolkit:ModalPopupExtender ID="mpe" runat="server"
BackgroundCssClass="modalBackground" DropShadow="true" CancelControlID="btnHide"
PopupControlID="pnl" TargetControlID="lblShow" />
<script type="text/javascript">
function setContentsHeight()
{
// get a referece of the contents table row
var contentsRow = document.getElementById("contents");
// set available height (browser height minus header and footer)
contentsRow.style.height = (document.documentElement.clientHeight - 60 - 60) + "px";
}
setContentsHeight();
window.onresize = setContentsHeight;
</script>
</form>
</body>
</html>
Is there any fix or workaround for this?
Thanks!