[OPEN] [#792] Ext.Net 3.1 Viewport x Field width and IE8 issues

Page 1 of 3 123 LastLast
  1. #1

    [OPEN] [#792] Ext.Net 3.1 Viewport x Field width and IE8 issues

    Hi, I'm facing an issue with field width when using viewport in the Ext.Net 3.1 and rendered by the IE8.
    The issue is that the field width is being incorrectly calculated with the half of the width it should be.
    The same does not occurs without the viewport or using the Ext.Net 2.5 version or the Chrome / Firefox browsers.
    In the sample below, the field is being rendered with 123px of width + 1px of padding and the expected width was the 300px - 50px = 250px.
    Could you check it, please?
    Below a sample code:
        <form runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
            <ext:Viewport runat="server">
                <Items>
                    <ext:Panel ID="Panel1" 
                        runat="server" 
                        Title="TextField Width Testing"            
                        BodyPadding="5"
                        Width="450"
                        Layout="VBoxLayout">
                        <Items>
                           <ext:TextField 
                                ID="txtField1" 
                                runat="server"                     
                                FieldLabel="field1" 
                                Width="300"
                                LabelWidth="50"
                                />
                        </Items>            
                    </ext:Panel>                
                </Items>
            </ext:Viewport>
       </form>
    Last edited by Daniil; Apr 24, 2015 at 11:28 AM. Reason: [OPEN] [#792]
  2. #2
    Hi @jcarlos,

    Could you, please, confirm (or don't) it is reproduce for you in IE10/IE11 in IE8 mode? It is not for me.

    Just I don't have the original IE8 to test at the moment.
  3. #3
    Hi @Daniil,

    I tested and I confirm that the issue cannot be reproduced in the IE11 in IE8 mode.
    It occurs in the original IE8 version.

    Best regards,

    José Carlos.
    Last edited by jcarlos; Apr 23, 2015 at 12:43 PM.
  4. #4
    Hi, I studied the source code of the viewport component of extjs5 and found no reason for this weird behavior.
    So, only for the purposes of testing, I changed from viewport to a container component with a render event to set its height.
    The behavior was exactly the same, that is, the width of fields was still not calculated correctly, so I guess the problem is not in the viewport component, but in some other place of the extjs tree of objects that should be calculating the width of the fields in the wrong way when using the IE8 browser.
    Any tips?
    Last edited by jcarlos; Apr 22, 2015 at 7:11 PM.
  5. #5
    More news, the behavior does not occurs if the render event was removed and keeping a constant height directly on the config attributes.

    Also, I tested the container with the viewport plugin and the behavior was also reproducible.

    So, to summarize:

    The behavior occurs in the IE8 version using the native Viewport component or, using a Container component together the viewport plugin or, the Container component with a render event that calculates the page height.

    The behavior does not occurs in the IE8 version with a Container component with a constant height definition.

    Any tips?
  6. #6
    Thank you for sharing the findings.

    Please post a screenshot of the original test case's result.

    Also please clarify - do you use the public 3.1 release? If so, please try with the latest from SVN trunk.
  7. #7
    Hi @Daniil, the tests was performed using the latest version from SVN trunk of Ext.Net.

    I performed a little more testing and concluded that the behavior occurs when applying a dynamic size, obtained by the native Ext.Element.getViewportWidth() and Ext.Element.getViewportHeight() functions of the extjs. They are used internally by the viewport.

    Follows the source codes and theirs respective screenshots.
    Please note the wrong space at the right of the fields due to the wrong calculation. Also, note that in the test case 4, the results was the expected for all the cases.

    Test case 1 - ViewPort Component

    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>IE8 x Field width issues</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
            <ext:ViewPort runat="server">
                <Items>
                    <ext:Panel ID="Panel1" 
                        runat="server" 
                        Title="Viewport Testing"            
                        BodyPadding="5"
                        Padding="10"
                        Width="350"
                        Layout="VBoxLayout">
                        <Items>
                           <ext:TextField ID="TextField1"  runat="server" Width="300" FieldLabel="TextField" />
                           <ext:NumberField ID="NumberField1"  runat="server" Width="300" FieldLabel="NumberField" />
                           <ext:ComboBox ID="ComboBox1"  runat="server" Width="300" FieldLabel="ComboBox">
                               <Items>
                                    <ext:ListItem Text="comboText1" Value="1" />
                                    <ext:ListItem Text="comboText2" Value="2" />
                               </Items>
                           </ext:ComboBox>
                        </Items>            
                    </ext:Panel>                
                </Items>
            </ext:ViewPort>
       </form>
    </body>
    </html>
    Click image for larger version. 

Name:	testCase1.jpg 
Views:	68 
Size:	40.8 KB 
ID:	23923


    Test case 2 - Container Component and ViewPort plugin

    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>IE8 x Field width issues</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
            <ext:Container runat="server">
                <CustomConfig>
                    <ext:ConfigItem Name="plugins" Value="viewport" />
                </CustomConfig>
                <Items>
                    <ext:Panel ID="Panel1" 
                        runat="server" 
                        Title="Container with Viewport plugin Testing"            
                        BodyPadding="5"
                        Padding="10"
                        Width="350"
                        Layout="VBoxLayout">
                        <Items>
                           <ext:TextField ID="TextField1"  runat="server" Width="300" FieldLabel="TextField" />
                           <ext:NumberField ID="NumberField1"  runat="server" Width="300" FieldLabel="NumberField" />
                           <ext:ComboBox ID="ComboBox1"  runat="server" Width="300" FieldLabel="ComboBox">
                               <Items>
                                    <ext:ListItem Text="comboText1" Value="1" />
                                    <ext:ListItem Text="comboText2" Value="2" />
                               </Items>
                           </ext:ComboBox>
                        </Items>            
                    </ext:Panel>                
                </Items>
            </ext:Container>
       </form>
    </body>
    </html>
    Click image for larger version. 

Name:	testCase2.jpg 
Views:	66 
Size:	42.3 KB 
ID:	23924

    Test case 3 - Container Component and dynamic size in the onRender event

    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>IE8 x Field width issues</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
            <ext:Container runat="server">
                <Listeners>
                    <Render Fn="onRenderSetSize" />
                </Listeners>
                <Items>
                    <ext:Panel ID="Panel1" 
                        runat="server" 
                        Title="Container w/dynamic size in a render event"
                        BodyPadding="5"
                        Padding="10"
                        Width="350"
                        Layout="VBoxLayout">
                        <Items>
                           <ext:TextField ID="TextField1"  runat="server" Width="300" FieldLabel="TextField" />
                           <ext:NumberField ID="NumberField1"  runat="server" Width="300" FieldLabel="NumberField" />
                           <ext:ComboBox ID="ComboBox1"  runat="server" Width="300" FieldLabel="ComboBox">
                               <Items>
                                    <ext:ListItem Text="comboText1" Value="1" />
                                    <ext:ListItem Text="comboText2" Value="2" />
                               </Items>
                           </ext:ComboBox>
                        </Items>            
                    </ext:Panel>                
                </Items>
            </ext:Container>
       </form>
        <script>
            function onRenderSetSize() {
                var me = this;
                me.width = Ext.Element.getViewportWidth();
                me.height = Ext.Element.getViewportHeight();
            }
        </script>
    </body>
    </html>
    Click image for larger version. 

Name:	testCase3.jpg 
Views:	100 
Size:	42.2 KB 
ID:	23925


    Test case 4 - Container Component and a constant size in the onRender event

    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>IE8 x Field width issues</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" ScriptMode="Debug" />
            <ext:Container runat="server">
                <Listeners>
                    <Render Fn="onRenderSetSize" />
                </Listeners>
                <Items>
                    <ext:Panel ID="Panel1" 
                        runat="server" 
                        Title="Container w/constant size in a render event - WORKS"
                        BodyPadding="5"
                        Padding="10"
                        Width="350"
                        Layout="VBoxLayout">
                        <Items>
                           <ext:TextField ID="TextField1"  runat="server" Width="300" FieldLabel="TextField" />
                           <ext:NumberField ID="NumberField1"  runat="server" Width="300" FieldLabel="NumberField" />
                           <ext:ComboBox ID="ComboBox1"  runat="server" Width="300" FieldLabel="ComboBox">
                               <Items>
                                    <ext:ListItem Text="comboText1" Value="1" />
                                    <ext:ListItem Text="comboText2" Value="2" />
                               </Items>
                           </ext:ComboBox>
                        </Items>            
                    </ext:Panel>                
                </Items>
            </ext:Container>
       </form>
        <script>
            function onRenderSetSize() {
                var me = this;
                me.width = 517;
                me.height = 170;
            }
        </script>
    </body>
    </html>
    Click image for larger version. 

Name:	testCase4.jpg 
Views:	64 
Size:	43.6 KB 
ID:	23926

    I'll be waiting for your comments.

    Best regards, thanks,

    José Carlos.
    Last edited by jcarlos; Apr 23, 2015 at 12:42 PM.
  8. #8
    Hi, I have some more strange findings to share. I would say that is so crazy behavior that I cannot believe that is logical or it is running that way.

    Using the same test case #3, I modified the function onRenderSetSize in order to reassign the attributes me.width and me.height with a constant values, immediately after the calls to functions Ext.Element.getViewportHeight() and Ext.Element.getViewportWidth(), as below:

    <script>
    	function onRenderSetSize() {
    		var me = this;
    
    		me.width = Ext.Element.getViewportWidth();
    		me.height = Ext.Element.getViewportHeight();
    
    		me.width = 400; // this can be any value wide enough to support the field widths
    		me.height = 300; // this can be any value wide enough to support the field height
    	}
    </script>
    The expected behavior was the same results as the test case 4, but surprisingly, the result was the same as the test case 3.

    Well, after some more testing, I commented out the calls to the functions Ext.Element.getViewportHeight() and Ext.Element.getViewportWidth(), giving the expected result.

    <script>
    	function onRenderSetSize() {
    		var me = this;
    
    		//me.width = Ext.Element.getViewportWidth();
    		//me.height = Ext.Element.getViewportHeight();
    
    		me.width = 400; // this can be any value wide enough to support the field widths
    		me.height = 300; // this can be any value wide enough to support the field height
    	}
    </script>
    To summarize, any simple call to the functions Ext.Element.getViewportHeight() or Ext.Element.getViewportWidth(), even without use their results is affecting the rendering of fields.

    I really don't know what to do in this case.

    Please, I need your urgent help because it is a showstopper in the conversion of my project from the Ext.Net 2.5 to the Ext.Net 3.1. The project uses a lot of pages with many fields and the application depends on the dynamic page size of the user's browsers and many users are still using the IE8 version.

    All the fields in the IE8 version is being rendered with wrong width, half of it should be.

    Regards,

    José Carlos.
  9. #9
    Hi, good news, I finally found a solution.

    Based on the findings of my prior post, I created an override of the native extjs5 functions getViewportHeight() and getViewportWidth() in order to avoid the direct access to the properties document.documentElement.clientHeight and document.documentElement.clientWidth in IE8.

    I don't know why but, when these properties are used in those functions, the width of the fields are wrongly calculated.

    So, I created two new custom variables (h and w) that are assigned in the initialization and also in the resize event of the window.

    These custom variables are then used by the new overrode functions getViewportHeight() and getViewportWidth(), solving the issue.

    Is there any chance to validate and embed this solution in the extjs5 core, because I would not like to maintain it when new releases were published?

    Follows below the source code of the solution:

    (function () {
        var h = customGetViewportHeight();
        var w = customGetViewportWidth();
    
        function customGetViewportHeight() {
            return Ext.isIE9m ? document.documentElement.clientHeight : window.innerHeight;
        }
    
        function customGetViewportWidth() {
            return (!Ext.isStrict && !Ext.isOpera) ? document.body.clientWidth : Ext.isIE9m ? document.documentElement.clientWidth : window.innerWidth;
        }
    
        Ext.define('Ext.overrides.GlobalEvents', {
            override: 'Ext.GlobalEvents',
    
            fireResize: function () {
    
                // Apr'24 - small fix
                w = customGetViewportWidth(),
                h = customGetViewportHeight();
    
                this.callParent(arguments);
            }
        });
    
    
        Ext.define('Ext.overrides.dom.Element', {
            override: 'Ext.dom.Element',
    
            statics: {
                getViewportHeight: function () {
                    return h;
                },
    
                getViewportWidth: function () {
                    return w;
                }
            }
        });
    })();
    Last edited by jcarlos; Apr 24, 2015 at 11:52 AM. Reason: Small fix of the solution
  10. #10
    Thanks a lot for sharing your findings!

    I create an Issue to track the defect. Maybe/hopefully, it will be fixed in later ExtJS releases.
    https://github.com/extnet/Ext.NET/issues/792
Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 8
    Last Post: Jan 21, 2013, 4:22 PM
  2. [CLOSED] ViewPort and fixed body width
    By marco.morreale in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 07, 2012, 1:42 PM
  3. Replies: 0
    Last Post: May 01, 2012, 4:15 AM
  4. issues with FieldLabel width
    By norphos in forum 1.x Help
    Replies: 1
    Last Post: May 13, 2011, 9:32 AM
  5. Serious Performance issues - ViewPort - Urgent
    By sairashid in forum 1.x Help
    Replies: 4
    Last Post: Jul 29, 2009, 2:54 PM

Tags for this Thread

Posting Permissions