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

**jcarlos** · Apr 24, 2015, 11:34 AM

Hi, just to post a small fix in the prior posted fireResize function, the callParent should be called after the assignments to the local variables in order to enable the correct resizing:

(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 () {

            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;
            }
        }
    });
})();

**jcarlos** · Aug 21, 2015, 1:25 PM

Hi, do you have some news about this issue?

I'm revisiting this topic because, despite the small fix that I have implemented, there are still some cases that is not working.
A good sample is the fileupload field that is available in ExtNet samples. When it is rendered in IE8 browser (not in a new version with a compatibility mode), the field is being rendered with half the size that should be.
Curiously, the similar sample in the extjs kitchen sink works well.
Besides, all the fields in the same container of the fileupload field are also affected.

Click image for larger version.

Name: ExtJS-FileUpload.png
Views: 55
Size: 43.8 KB
ID: 24156

Click image for larger version.

Name: ExtNet-FileUpload.jpg
Views: 40
Size: 93.2 KB
ID: 24157

Click image for larger version.

Name: IEVersion.PNG
Views: 33
Size: 21.9 KB
ID: 24158

Regards,

JosÃ© Carlos.

**Daniil** · Aug 21, 2015, 5:59 PM

Unfortunately, it has not been fixed.

I will need to have one more look with a fresh head.

**Daniil** · Aug 24, 2015, 8:10 AM

Besides, all the fields in the same container of the fileupload field are also affected.

Not sure what you mean. Please elaborate. The Name TextField on your screenshot appears to be not affected. I can only reproduce the issue with a FileUploadField and it looks to be specific to FileUploadField. Also there is no Viewport on that page. I am investigating further. Just needed a clarification what you mean that it affects other fields.

**Daniil** · Aug 24, 2015, 8:14 AM

Ah, just tried to add a field after FileUploadField and it affects it indeed. Same half-width issue. Still appears to be only reproducible with presence of FileUploadField.

**Daniil** · Aug 24, 2015, 9:04 AM

Please try this override and let me know if it fixes the problem or not.

if (Ext.isIE8) {
    Ext.form.field.Base.override({
        indicatorTpl: [
            '<div id="{id}-indicator" style="position:relative;display:none;">', // changed "display: table-cell;" to "display: none;"
                '<div class="x-field-indicator {indicatorCls} {indicatorIconCls}">{indicatorHtml}</div>',
            '</div>'
        ]
    });
}

There are some issues in IE8 with display: table-cell;.
http://stackoverflow.com/questions/4...e-cell-element

Here is a full test case I dealt with.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script>
        if (Ext.isIE8) {
            Ext.form.field.Base.override({
                indicatorTpl: [
                    '<div id="{id}-indicator" style="position:relative;display:none;">', // changed "display: table-cell;" to "none"
                        '<div class="x-field-indicator {indicatorCls} {indicatorIconCls}">{indicatorHtml}</div>',
                    '</div>'
                ]
            });
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:TextField runat="server" Width="400" />
    <ext:FileUploadField runat="server" Width="400" />
    <ext:TextField runat="server" Width="400" />

    <ext:FormPanel ID="FormPanel1" runat="server" Width="500">
        <Defaults>
            <ext:Parameter Name="anchor" Value="100%" Mode="Value" />
        </Defaults>
        <Items>
            <ext:TextField runat="server" />
            <ext:FileUploadField runat="server" />
            <ext:TextField runat="server" />
        </Items>
    </ext:FormPanel>
</body>
</html>

**jcarlos** · Aug 24, 2015, 3:29 PM

Hi Daniil, thanks for your feedback.

Please try this override and let me know if it fixes the problem or not.

I'm going to try the solution you suggested, but at the same time, I was doing other test and when completely removed the FieldExtensions script from the ExtNet and reinserted the same code, but at the end, together with my custom scripts, the problem was solved.

Also there is no Viewport on that page. I am investigating further. Just needed a clarification what you mean that it affects other fields.

Really, in this new sample that I posted, there are no viewport involved, but the issue is the same. I only created a simple example to be easily reproducible.

Still appears to be only reproducible with presence of FileUploadField.

Unfortunately, not exactly the true. There are still some cases that occurs the same issue with the controls in a popup window when it is closed and opened again.

The same solution, regarding change code place, also works here.

I will test the solution that you suggested and will keep you informed.

Thanks, regards,

JosÃ© Carlos.

**Daniil** · Aug 24, 2015, 4:01 PM

Re: FieldExtensions

Exactly, I also found out those overrides is a culprit. To be more precise the indicatorTpl and IE8 issue with display: table-cell; which I tried to override. Looking forward to hear the results of testing.

**jcarlos** · Aug 24, 2015, 5:48 PM

Hi Daniil, good news!!!

The override that you suggested solved the last issue that I posted in this thread, regarding the FileUpload field and also the windows popups.

I also tested the original issue in this thread. I removed the fixes that I had implemented before and seems that the issue was partially solved with the current release of ExtNet.
I mean, the field width is now being calculated correctly.

However, unfortunately there are still some issue with the viewport and netviewport plugins.

The issue that I am experiencing now with the netviewport plugin is that it is not calculating the viewport width correctly, cutting the controls at the right side. It occurs when it is inside a centered html div that has a width lower than the body width.

I will do more tests and post the results in this thread.

Best regards, thanks,

JosÃ© Carlos.

**Daniil** · Aug 25, 2015, 6:59 AM

Nice to hear the override helps, thank you for confirmation.

The issue that I am experiencing now with the netviewport plugin is that it is not calculating the viewport width correctly, cutting the controls at the right side. It occurs when it is inside a centered html div that has a width lower than the body width.

A test case would be appreciated.

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

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] A Field note doesn't extend to the right when setting the Field width using the inputWidth

[CLOSED] ViewPort and fixed body width

how to set width and height of Viewport in ext.Net

issues with FieldLabel width

Serious Performance issues - ViewPort - Urgent

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources