I tried to upload these files and snapshots, but I wasn't able to...said I need to ask the administrator Should I be posting this somewhere on the issue tracker pages?
Only in ie 6, the dropdowns disappear(not in ie7 or firefox, but need this fixed). Also, the modalpopup is messed up with divs. A lot of production sites out there have their sites setup with absolute divs, but I can't seem to be able to use modalpopup because of the site being set up this way. You can also notice the modal popup after you try to move it, it recenters based on the divs and not the page. If the absolute issue is solved, then that would solve this issue to. Please let me know if these fixes will be released or if there are any comments on these issues I'm having. I would really like to incorporate this into a production site we have.
You can replicate the problem with these 3 files and just add web.config:
Site1.Master
<%@dotnet.itags.org. Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="testingajax.Site1" %>
<!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>Untitled Page</title>
<link id="Link1" href="http://links.10026.com/?link=~/style.css" rel="stylesheet" type="text/css" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<div style="margin: 0 auto; width: 950px; height: 600px; position: relative;">
<div style="width: 950px; height: 572px; z-index: 100; left: 0px; position: absolute; top: 0px;">
<div id="top" style="z-index: 140; left: 0px; width: 950px; position: absolute; top: 0px; height: 53px;"></div>
<div id="topExtend" style="width: 950px; height: 23px; border-bottom: #999999 1px solid; border-top: #999999 1px solid; z-index: 106; left: 0px; position: absolute; top: 53px;">
<asp:ContentPlaceHolder ID="MenuBarHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="z-index: 100; left: 0px; width: 950px; position: absolute; top: 78px; height: 466px; background-color: #c3d6eb;"></div>
<div style="z-index: 100; left: 6px; width: 943px; position: absolute; top: 84px;height: 459px;">
<asp:ContentPlaceHolder ID="TabsContentHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="z-index: 100; left: 0px; width: 950px; position: absolute; top: 544px; height: 28px; border-top: #999999 1px solid; font-size: 0.8em; text-align: center; vertical-align: bottom;">
test2
</div>
</div>
<div style="width: 251px; height: 23px; z-index: 101; left: 0px; position: absolute; top: 53px;"></div>
</div>
</form>
</body>
</html>
WebForm1.aspx
<%@dotnet.itags.org. Page Language="VB" MasterPageFile="~/Site1.master" AutoEventWireup="false" title="test ajax" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MenuBarHolder" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TabsContentHolder" Runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
<div>Move Window</div>
</asp:Panel>
<table cellpadding="10" width="341" height="169"><tr><td>
<asp:Label ID="popupLabel5" runat="server" Font-Bold="True" style="vertical-align: middle; text-align: center" Width="311px"></asp:Label>
</td></tr></table>
<asp:Button runat="server" Text="ok" />
</asp:Panel>
<asp:DropDownList ID="StateDropDownList" runat="server" Style="z-index: 139; left: 324px; position: absolute; top: 163px" TabIndex="10">
<asp:ListItem></asp:ListItem>
<asp:ListItem>MI</asp:ListItem>
<asp:ListItem>AK</asp:ListItem>
<asp:ListItem>AL</asp:ListItem>
</asp:DropDownList>
<asp:LinkButton ID="LinkButton" runat="server">LinkButton</asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LinkButton"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
PopupDragHandleControlID="Panel3">
</cc1:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
style.css
/*Modal Popup*/
.modalBackground {
background-color:Gray;
filter:alpha(opacity=60);
opacity:0.6;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
.sampleStyleA {
background-color:#FFF;
}
.sampleStyleB {
background-color:#FFF;
font-family:monospace;
font-size:10pt;
font-weight:bold;
}
.sampleStyleC {
background-color:#ddffdd;
font-family:sans-serif;
font-size:10pt;
font-style:italic;
}
.sampleStyleD {
background-color:Blue;
color:White;
font-family:Arial;
font-size:10pt;
}
I think this may explain some of what you're seeing:http://forums.asp.net/ShowPost.aspx?PostID=1357977
Dave,
Thanks for the additional information. Since the modalpopup was designed to be placed where it should be displayed, I placed it in the masterpage so that it would cover the whole page as desired.
Earlier, the dropdown would just disappear during the modalpopup. Now it disappears and doesn't show after you close the modalpopup, as well as, the linkbutton deactivates itself so the modalpopup stops working right after the first use.
Here is the below modified code to replicate the error (I'm using ie 6). I'm looking for any furthur suggestions from anyone. Thanks!!
test.aspx
<%@. Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" title="Untitled Page" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MenuBarHolder" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TabsContentHolder" Runat="Server">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="StateDropDownList" runat="server" Style="z-index: 139; left: 324px; position: absolute; top: 163px" TabIndex="10">
<asp:ListItem></asp:ListItem>
<asp:ListItem>MI</asp:ListItem>
<asp:ListItem>AK</asp:ListItem>
<asp:ListItem>AL</asp:ListItem>
</asp:DropDownList>
<asp:LinkButton ID="LinkButton" runat="server">LinkButton</asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LinkButton"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
PopupDragHandleControlID="Panel3">
</cc1:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content
MasterPage.master
<%@. Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %
<!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>Untitled Page</title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=60);
opacity:0.6;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
<div>Move Window</div>
</asp:Panel>
<table cellpadding="10" width="341" height="169"><tr><td>
<asp:Label ID="popupLabel5" runat="server" Font-Bold="True" style="vertical-align: middle; text-align: center" Width="311px"></asp:Label>
</td></tr></table>
<asp:Button ID="Button1" runat="server" Text="ok" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<div style="margin: 0 auto; width: 950px; height: 600px; position: relative;">
<div style="width: 950px; height: 572px; z-index: 100; left: 0px; position: absolute; top: 0px;">
<div id="top" style="z-index: 140; left: 0px; width: 950px; position: absolute; top: 0px; height: 53px;"></div>
<div id="topExtend" style="width: 950px; height: 23px; border-bottom: #999999 1px solid; border-top: #999999 1px solid; z-index: 106; left: 0px; position: absolute; top: 53px;">
<asp:ContentPlaceHolder ID="MenuBarHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="z-index: 100; left: 0px; width: 950px; position: absolute; top: 78px; height: 466px; background-color: #c3d6eb;"></div>
<div style="z-index: 100; left: 6px; width: 943px; position: absolute; top: 84px;height: 459px;"
<asp:ContentPlaceHolder ID="TabsContentHolder" runat="server">
</asp:ContentPlaceHolder
</div>
<div style="z-index: 100; left: 0px; width: 950px; position: absolute; top: 544px; height: 28px; border-top: #999999 1px solid; font-size: 0.8em; text-align: center; vertical-align: bottom;">
test2
</div>
</div>
<div style="width: 251px; height: 23px; z-index: 101; left: 0px; position: absolute; top: 53px;"></div>
</div>
</form>
</body>
</html>
I figured it out...it's because in test.aspx UpdateMode="Conditional" and it should be "Always". Now it's just the ie6 issue of not showing dropdowns during modalpopup mode, but it looks like this will be fixed for the next release (issue 5124).
No comments:
Post a Comment