Rank: Advanced Member
Groups: Member
Joined: 6/9/2007
Posts: 98
|
Hi, The z-index of an dialog that inside a usercontrol witch loaded with a dialog is behind the parent dialog. Can you fix this? Here is a sample page. Default.aspx
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestProject.Default" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<%@ Register TagPrefix="demo" TagName="subControl" Src="~/SubControl.ascx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="open" runat="server" Text="open" OnClick="open_Click" />
<eo:Dialog ID="Dialog1" runat="server" BackColor="#47729F" Height="100px" Width="168px" BackShadeColor="Black" BackShadeOpacity="50" ControlSkinID="None" HeaderHtml="Dialog Title">
<HeaderStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #ffbf00 3px solid; padding-left: 4px; font-weight: bold; font-size: 11px; padding-bottom: 2px; color: white; padding-top: 2px; border-bottom: #22456a 1px solid; font-family: verdana" />
<ContentStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #7d97b6 1px solid; padding-left: 4px; border-left-width: 1px; font-size: 11px; border-left-color: #728eb8; padding-bottom: 4px; color: white; padding-top: 4px; border-bottom: #22456a 1px solid; font-family: verdana" />
<ContentTemplate>
Dialog 1
<demo:subControl ID="xxx" runat="server" />
</ContentTemplate>
<FooterStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #7d97b6 1px solid; padding-left: 4px; border-left-width: 1px; font-size: 11px; border-left-color: #728eb8; padding-bottom: 4px; color: white; padding-top: 4px; border-bottom: #22456a 1px solid; font-family: verdana" />
</eo:Dialog>
</div>
</form>
</body>
</html>
Default.aspx.cs
Code: C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestProject
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
Dialog1.InitialState = EO.Web.DialogState.Visible;
}
protected void open_Click(object sender, EventArgs e)
{
Dialog1.InitialState = EO.Web.DialogState.Visible;
}
}
}
SubControl.ascx
Code: HTML/ASPX
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SubControl.ascx.cs" Inherits="TestProject.SubControl" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<asp:Button ID="open" runat="server" Text="open" OnClick="open_Click" />
<eo:Dialog ID="Dialog1" runat="server" BackColor="#47729F" Height="200px" Width="268px" BackShadeColor="Black" BackShadeOpacity="50" ControlSkinID="None" HeaderHtml="Dialog Title">
<HeaderStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #ffbf00 3px solid; padding-left: 4px; font-weight: bold; font-size: 11px; padding-bottom: 2px; color: white; padding-top: 2px; border-bottom: #22456a 1px solid; font-family: verdana" />
<ContentStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #7d97b6 1px solid; padding-left: 4px; border-left-width: 1px; font-size: 11px; border-left-color: #728eb8; padding-bottom: 4px; color: white; padding-top: 4px; border-bottom: #22456a 1px solid; font-family: verdana" />
<ContentTemplate>
Dialog 2
</ContentTemplate>
<FooterStyleActive CssText="border-right: #22456a 1px solid; padding-right: 4px; border-top: #7d97b6 1px solid; padding-left: 4px; border-left-width: 1px; font-size: 11px; border-left-color: #728eb8; padding-bottom: 4px; color: white; padding-top: 4px; border-bottom: #22456a 1px solid; font-family: verdana" />
</eo:Dialog>
SubControl.ascx.cs
Code: C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestProject
{
public partial class SubControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void open_Click(object sender, EventArgs e)
{
Dialog1.InitialState = EO.Web.DialogState.Visible;
}
}
}
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi,
Please try to use client side API to open the second dialog. The reason is a dialog's z-index is not determined by parent/child relationship in the HTML. It's z-index is determined by the sequence the dialogs are opened. So for example, if dialog2 is opened after dialog1 has already been opened, then dialog2 will be on top of dialog1. In this case, the dialog in the user control is declared before the dialog in the containing page (it's HTML closes before the parent closes). So the child dialog gets initialized before the parent dialog is initialized. Since both dialogs are set to open as soon as initialized, the child dialog opens first. This causes the parent dialog to be displayed on top of the child dialog.
The only way to resolve this issue is to change the timing when the dialogs are opened. If you always open the parent dialog on the server side and open the child dialog on the client side (with JavaScript when user clicks the button), then the child dialog will always open after the parent dialog open thus can have a higher zIndex than the parent dialog. You can also use some other techniques, for example, by calling setTimeout to delay the opening of the child dialog thus causing it to be opened later than the parent dialog. The bottom line is, its the timing, not the parent/child relationship that determines the dialog's zindex.
Hope this helps. Please feel free to let us know if you still have any more questions.
Thanks!
|
Rank: Advanced Member
Groups: Member
Joined: 6/9/2007
Posts: 98
|
Hi,
I have tested other solutions but they doesn't work for me. Also the idee to open the dialog on clientside doesn't work for me. The solution there i have this problem is too complex to make this hack ...
The only way to fix the problem currently is on when i set the dialog2 outside and bottom of dialog 1. But this does'nt work in project.
But it could work when i can fix the z-index on my server control. so i can set the z-index on each layer. These should also fix another problem from an other thread (http://www.essentialobjects.com/forum/postsm36003_EODialog-with-TinyMCE.aspx#36003)
Is this possible to implement for the dialog control? A fix for this problem is very urgend for me ...
Kind regards
Philipp
|