What's New?

[CLOSED] IE9 Issue with modal window

  1. #1
    Jun 19, 2013, 7:11 PM

    [CLOSED] IE9 Issue with modal window

    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>
    Attached Thumbnails Click image for larger version.  Name: IE_WindowIssue.PNG  Views: 27  Size: 32.8 KB  ID: 6417  
    Last edited by Daniil; Jun 20, 2013 at 9:29 AM. Reason: [CLOSED]
  2. #2
    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>
  3. #3
    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...ll-browsers%29

    Thanks
    Attached Thumbnails Click image for larger version.  Name: chrome_window.PNG  Views: 15  Size: 42.5 KB  ID: 6418  
  4. #4
    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?
  5. #5
    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!

Similar Threads

  1. About the model window z-Index's problem
    By PeerLessSoul in forum 2.x Help
    Replies: 2
    Last Post: Nov 05, 2012, 8:17 AM
  2. Passing a model to a window called by a direct event
    By RCM in forum 2.x Help
    Replies: 2
    Last Post: Aug 30, 2012, 9:37 PM
  3. [CLOSED] Row Editor issue with Checkbox selection model
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 07, 2011, 5:12 PM
  4. [CLOSED] [1.0] Rendering Chart/Flash behind Model Window
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Nov 08, 2010, 7:24 PM
  5. Model window horizontal scroll bar issue...
    By vs.mukesh in forum 1.x Help
    Replies: 0
    Last Post: Jun 23, 2010, 3:35 PM

Posting Permissions