PDA

View Full Version : [CLOSED] IE9 Issue with modal window



bogc
Jun 19, 2013, 7:11 PM
Hello:

I have an issue reproducible through the code below related to windows.

Steps to reproduce:

1. Create the two pages based on the code below
2. Open TestModalWindow.aspx in IE
3. Resize the IE window such that the content available for the web page has 530px in height. This is to simulate smaller screen resolutions
4. Click on the open window button. A Test Window window shows up
5. Drag the window down. The content of the panel behind the window gets pushed up and a white bar is visible as you can see in the screenshot I attached.

Could you please look at this?

There are issues related to this scenario in Chrome as well but the behavior is different. I need to work on another sample to reproduce that one.

Thank you!



TestModalWindow.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestModalWindow.aspx.cs" Inherits="Ext.Net.Examples.Examples.Window.Basic.Hello_World .TestModalWindow" %>

<!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></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>
<ext:Viewport runat="server" Layout="fit">
<Items>
<ext:TabPanel runat="server">
<Items>
<ext:Panel runat="server" Title="SomeTab" Layout="fit">
<Loader Url="TestModalWindowChildPage.aspx" Mode="Frame" >
<LoadMask ShowMask="True"/>
</Loader>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>



TestModalWindowChildPage.aspx



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestModalWindowChildPage.aspx.cs" Inherits="Ext.Net.Examples.Examples.Window.Basic.Hello_World .TestModelWindowChildPage" %>

<!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></title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<div>
<ext:Viewport runat="server">
<Items>
<ext:Panel ID="Panel1" runat="server">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Open window">
<Listeners>
<Click Handler="#{modalWindow}.show();"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:Window runat="server" ID="modalWindow" Title="Test Window" Width="500" Height="500" Modal="true" Closable="True" CloseAction="Hide" Hidden="true">
<Items>
<ext:Panel ID="Panel2" runat="server" Title="Some content">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Button ID="Button2" runat="server" Text="Button 1"></ext:Button>
<ext:Button ID="Button3" runat="server" Text="Button 2"></ext:Button>
<ext:Button ID="Button4" runat="server" Text="Button 3"></ext:Button>
<ext:Button ID="Button5" runat="server" Text="Button 4"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:Window>
</div>
</form>
</body>
</html>

Baidaly
Jun 20, 2013, 12:02 AM
Hello!

Please, use Constrain property:


<ext:Window runat="server" ID="modalWindow" Title="Test Window" Width="500" Height="500" Closable="True" CloseAction="Hide" Hidden="true" Constrain="True" Modal="True">

Or you can mask form manually:



<form id="form1" runat="server">
<div>
<ext:Viewport runat="server">
<Items>
<ext:Panel ID="Panel1" runat="server">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Open window">
<Listeners>
<Click Handler="
#{modalWindow}.show();
Ext.fly('form1').mask();
"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:Viewport>
<ext:Window runat="server" ID="modalWindow" Title="Test Window" Width="500" Height="500" Closable="True" CloseAction="Hide" Hidden="true" Modal="True">
<Listeners>
<Hide Handler="Ext.fly('form1').unmask();" />
</Listeners>
<Items>
<ext:Panel ID="Panel2" runat="server" Title="Some content">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Button ID="Button2" runat="server" Text="Button 1"></ext:Button>
<ext:Button ID="Button3" runat="server" Text="Button 2"></ext:Button>
<ext:Button ID="Button4" runat="server" Text="Button 3"></ext:Button>
<ext:Button ID="Button5" runat="server" Text="Button 4"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:Window>
</div>
</form>

bogc
Jun 20, 2013, 12:36 AM
If I use contrain I cannot move the window.

The second sample doesn't work for me. The window doesn't show up! I am testing using IE9. If I increase the size of the browser window I see the window at the window at the bottom for a short time then it disappears.

For chrome check out my screenshot. The window pushes up the entire content.

I think there is something wrong with the interaction between the window and the viewport. Also see my other post: http://forums.ext.net/showthread.php?25362-Issue-with-modal-window-%28all-browsers%29

Thanks

Baidaly
Jun 20, 2013, 1:53 AM
So you should use the second approach. For me it works fine.

Do you see any mask? Or you still have the same problem as in the first post?

bogc
Jun 20, 2013, 2:20 AM
You can close this thread. The problem was the missing layout on the window component (I set it to fit). constrain did the trick and it works in IE.

Thanks!