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.
Works fine for me in IE7 and FF2...what browser are you using? It *could* be because you have mainTable as height:100% and then the modal popup is defined outside of that (even though it is display:none). Maybe an older browser doesn't interpret this correctly
and so the height of the modal popup is added to height:100% of the table. Shot in the dark though really :)
As is mine. I dragged the window out until the scrollbars went away and then alerted the window size.
Whoa, that's weird. If the browser starts in fullscreen mode it happens all of the time. If it starts slightly reduced in size, I am able to drag it out and make the scrollbars go away.
This may be a browser bug.
Please remember to "mark as answered" posts that have helped you.
If the browser starts with a tiny scrollbar (in other words, starts with the browser contents 1% higher than the browser available size), than the ModalPopup displays fine.
But if the browser starts without a vertical scrollbar, than we have the problem (when the modal popup is displayed, it adds the extra vertical space and scrollbar, as described).
I wouldn't say it's a browser bug... I don't know, it looks like a Toolkit bug.
This is not a new page. I was using an older version (that was released together with the RC version of AJAX), and the modal popup was working perfectly.
Then I upgraded to Ajax RTM and latest Toolkit... and the problem started to happen.
leodippolito
Member
438 Points
123 Posts
Bug in ModalPopup? (vertical scrollbar)
Mar 15, 2007 08:34 PM|LINK
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!
Jason Hill
Contributor
2019 Points
497 Posts
Re: Bug in ModalPopup? (vertical scrollbar)
Mar 15, 2007 09:05 PM|LINK
leodippolito
Member
438 Points
123 Posts
Re: Bug in ModalPopup? (vertical scrollbar)
Mar 15, 2007 09:08 PM|LINK
The problem happens in IE7 and FF2 here.
I tested from different machines, saw the same problem.
LSU.Net
Contributor
2479 Points
467 Posts
Re: Bug in ModalPopup? (vertical scrollbar)
Mar 15, 2007 09:11 PM|LINK
Please remember to "mark as answered" posts that have helped you.
-----
http://lsudotnet.blogspot.com
Jason Hill
Contributor
2019 Points
497 Posts
Re: Bug in ModalPopup? (vertical scrollbar)
Mar 15, 2007 09:14 PM|LINK
leodippolito
Member
438 Points
123 Posts
Re: Bug in ModalPopup? (vertical scrollbar)
Mar 15, 2007 09:15 PM|LINK
Hmm..
My desktop resolution is 1280 x 1024.
LSU.Net
Contributor
2479 Points
467 Posts
Re: Bug in ModalPopup? (vertical scrollbar)
Mar 15, 2007 09:18 PM|LINK
As is mine. I dragged the window out until the scrollbars went away and then alerted the window size.
Whoa, that's weird. If the browser starts in fullscreen mode it happens all of the time. If it starts slightly reduced in size, I am able to drag it out and make the scrollbars go away.
This may be a browser bug.
Please remember to "mark as answered" posts that have helped you.
-----
http://lsudotnet.blogspot.com
leodippolito
Member
438 Points
123 Posts
Re: Bug in ModalPopup? (vertical scrollbar)
Mar 15, 2007 10:03 PM|LINK
LSU, I understand what you mean.
If the browser starts with a tiny scrollbar (in other words, starts with the browser contents 1% higher than the browser available size), than the ModalPopup displays fine.
But if the browser starts without a vertical scrollbar, than we have the problem (when the modal popup is displayed, it adds the extra vertical space and scrollbar, as described).
I wouldn't say it's a browser bug... I don't know, it looks like a Toolkit bug.
This is not a new page. I was using an older version (that was released together with the RC version of AJAX), and the modal popup was working perfectly.
Then I upgraded to Ajax RTM and latest Toolkit... and the problem started to happen.
Jason Hill
Contributor
2019 Points
497 Posts
Re: Bug in ModalPopup? (vertical scrollbar)
Mar 15, 2007 10:13 PM|LINK
leodippolito
Member
438 Points
123 Posts
Re: Bug in ModalPopup? (vertical scrollbar)
Mar 15, 2007 10:13 PM|LINK
Now I cannot reproduce the modal popup working fine (when the browser starts with a little scrollbar).
Well, that's definitely confusing...