[FIXED] [#643] Modal window mask doesn't adjust it's size to the browser size

  1. #1

    [FIXED] [#643] Modal window mask doesn't adjust it's size to the browser size

    Hi,

    When modal window is shown, it's mask size doesn't adjust correctly to the browser's window size.

    The example below display following window (small browser window):


    When maximize or resize browser's window, the Ext.net window mask is not adjusted:


    The mask size is adjusted when window is moved:


    Example code:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <style>
            .x-body {
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager
                ID="ResourceManager1"
                runat="server" />
    
            <ext:Viewport
                runat="server"
                Layout="BorderLayout">
                <Items>
                    <ext:Window
                        ID="winPartner"
                        runat="server"
                        Title="Partner"
                        CloseAction="Hide"
                        AutoShow="false"
                        Modal="true"
                        Hidden="false"
                        Width="320"
                        Height="160"
                        Layout="Fit">
                        <Items>
                            <ext:FormPanel
                                ID="frmPartner"
                                runat="server"
                                Border="false"
                                Frame="false"
                                DefaultAnchor="100%"
                                BodyPadding="8">
                                <Items>
                                    <ext:TextField
                                        ID="txtPartnerFirstName"
                                        runat="server"
                                        FieldLabel="First Name"
                                        Name="partnerFirstName" />
    
                                    <ext:TextField
                                        ID="txtPartnerLastName"
                                        runat="server"
                                        FieldLabel="Last Name"
                                        Name="partnerLastName" />
    
                                </Items>
                            </ext:FormPanel>
    
                        </Items>
                        <Buttons>
                            <ext:Button
                                ID="btnPartnerSave"
                                runat="server"
                                Text="Save">
                            </ext:Button>
                            <ext:Button
                                ID="btnPartnerCancel"
                                runat="server"
                                Text="Cancel">
                                <Listeners>
                                    <Click Handler="this.up('window').hide();" />
                                </Listeners>
                            </ext:Button>
                        </Buttons>
                    </ext:Window>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>

    I checked latest IE 11, Firefox, Chrome and Opera... all are affected.
    Attached Thumbnails Click image for larger version. 

Name:	partner1.png 
Views:	27 
Size:	8.8 KB 
ID:	19131   Click image for larger version. 

Name:	partner1a.png 
Views:	28 
Size:	14.5 KB 
ID:	19141   Click image for larger version. 

Name:	partner2.png 
Views:	29 
Size:	14.3 KB 
ID:	19151  
    Last edited by fabricio.murta; Apr 27, 2016 at 2:12 AM.
  2. #2
    Hi Matt,

    Thank you for the report. Created an Issue.
    https://github.com/extnet/Ext.NET/issues/643

    It is a known issue for Sencha.
    http://www.sencha.com/forum/showthread.php?295917

    There are some workarounds.
    http://www.sencha.com/forum/showthre...=1#post1085032
  3. #3
    Thank you, The patch worked.

    //http://www.sencha.com/forum/showthread.php?297130
    //Target: 5.1.1.150, 5.0.2.1411, 5.0.1.1255, 5.0.0.970
    //Modal window background mask should be resized after viewport resize
    //If there is no delay, it's not resized to the new size
    //Can not override the constructor for ZIndexManager or WindowManager so the fix is here (possibly because WindowManager is already instantiated)
    Ext.onReady(function () {
    	Ext.un('resize', Ext.WindowManager._onContainerResize, Ext.WindowManager);
    	Ext.on('resize', Ext.WindowManager._onContainerResize, Ext.WindowManager, { delay: 50 });
    });
    Last edited by matt; Jan 20, 2015 at 4:01 PM.
  4. #4
    Hello!

    Sencha claims they fixed this, and according to their change log (check github issue for details) the fix made it to ExtJS 6.0.2 which is coming up with Ext.NET 4.1.0! I hope the news are good, it's been more than one year since the issue has been reported, after all!

    Unfortunately, the 3.x version they claimed to merge in (ExtJS 5.1.3) didn't make it out to the public and we are not sure it is ever going to.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Auto adjust column size in grid panel
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 24
    Last Post: Dec 07, 2014, 8:41 PM
  2. The Modal Window behind own mask/shadow
    By savasdogangb in forum 2.x Help
    Replies: 1
    Last Post: Feb 20, 2013, 7:30 AM
  3. Replies: 2
    Last Post: Jul 26, 2012, 2:12 AM
  4. Replies: 0
    Last Post: Feb 22, 2010, 12:24 PM
  5. Replies: 0
    Last Post: Dec 10, 2009, 6:54 PM

Tags for this Thread

Posting Permissions