Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Window dragging issue in IE

ExtJS 4

I want my Ext.Window to be dragged outside the browser boundary. So I removed the scroll bars of the browser as

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only

In firefox its working fine. But in IE, whenever I drag the window outside, it is again snapped within the browser window.

I want this (case 1)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|                            |
|                            |
|                            |
|                            |
|                            |
|                            |
|                       --window----
|                       |  A |   B |
|                       -----+------
|                            |
|                            |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

A = visible part

B = cropped part

But this is happening in IE8 (case 2)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|                            |
|                            |
|                            |
|                            |
|                            |
|                            |
|                  --window--|
|                  |        ||
|                  ----------|
|                            |
|                            |
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Please tell me why is this happening. How to correct this?

EDITED:

This is the full code which I'm using. It behaves as case 1 (which is required) in firefox but as case 2 in IE.

<html>
<head>
    <title>Page5 (Window)</title>

    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"> 
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript">

    Ext.onReady(function(){
        document.documentElement.style.overflow = 'hidden';  // firefox, chrome
        document.body.scroll = "no"; // ie only
        Ext.create('Ext.Window', {
            title: 'Title',
            html: 'html',
            height: 300,
            width: 300
            //constrainHeader: true
        }).show();
    });
    </script>
</head>
<body background="Water lilies.jpg" ></body>
</html>
like image 927
Shashwat Avatar asked Aug 31 '12 08:08

Shashwat


People also ask

Is dragging lag on Windows 11 a new problem?

Fix for Windows Dragging Lag (applies to Windows 10 too) Tip I finally found the fix! This problem is not new at all and in my case it was even on Windows 10, but on Windows 11 it was much more visible when opening explorer from taskbar. It is much more hardware related and dependent on type of motherboard and/or just conicidence.

What are the issues with Microsoft Edge without IE11?

* Issues: Has address bar and windows resize a bit smaller than in IE11 - We open index.html in Edge without IE mode, from a shortcut with the option -app ("C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" -app=http://localhost :8080/index.html), * window.resizeTo works correctly, the window is resized

How do I open index html in edge without IE mode?

- We open index.html in Edge without IE mode, from a shortcut with the option -app ("C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" -app=http://localhost :8080/index.html), * window.resizeTo works correctly, the window is resized * It does not have an address bar, correct. * Issues: IE specific javascript code doesn't work

Is there a website working in production environments in IE11?

Hi, We currently have a website that is working in production environments correctly in IE11. The url is added in the browser's trusted sites and in the Microsoft Tech Community Home


1 Answers

It works if your window is inside some ExtJS container like Viewport or Panel. See code below :

Ext.onReady(function() {
    document.documentElement.style.overflow = 'hidden'; // firefox, chrome
    document.body.style.overflowX = 'hidden';
    document.body.style.overflowY = 'hidden';
    //  document.body.style.position = 'relative';
    document.body.scroll = "no"; // ie only
    Ext.create('Ext.Viewport', {
        title : 'Test Panel',
        width : 1000,
        height : 700,
        items : [ {
             id : 'mywin',
             title : 'Title',
             html : 'html',
             height : 300,
             width : 300
        } ]
    });
    Ext.getCmp('mywin').show();
});

You can contain it in a Panel also... if the panel is smaller than the browser's view, the window scrolls outside the panel and on reaching the browser boundaries behaves like you want it to.

Check out this. I was not able to change the body's position type and get this working. May be you can try it out.

like image 178
sErVerdevIL Avatar answered Oct 02 '22 00:10

sErVerdevIL