RadWindow on touch devices

[René]

Hello,

we have problem with RadWindow on touch devices.

It is simple scenario. We have page and RadWindow. Let's say there is just button to open modal maximized window. It works. But you can use touch and move with overlay below window. The same issue is on demo page http://demos.telerik.com/aspnet-ajax/window/examples/modalpopup/defaultcs.aspx. Navigate to this page in any Android browser (I think the same is in IE on Windows Phone or Chrome on Android), set window as modal and maximize it. Then simply drag upwards and window "floats" away and you will see page with overflow.

The same way you cane move left/right if page below window is horizontal scrollable. Then sometimes actions in this window changes position of window and it jumps somewhere to the right and user can only see overlay and have to drag window back.

This happens only on touch devices. Works fine on desktops.

Is there any way how to prevent this? Tried to override touchstart, touchmove, set window behavior only to close (no move or resize) etc. events, but without any luck.

Thnx for any help

[Dimitar]

Hello,

Thank you for your feedback. I was able to reproduce the issue and I have logged it for fixing.
Meanwhile, you may use the following workaround to prevent the page scrolling:

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientCommand="OnClientCommand" />

<style>
    html, body {
        margin: 0px;
        padding: 0px;
        border: 0px;
    }
</style>

<script type="text/javascript">
        var currentDialog = null;

        function OnClientCommand(sender, eventArgs) {
            var commandName = eventArgs.get_commandName();

            if ($telerik.isTouchDevice) {
                if (commandName == "Maximize") {
                    document.body.style.position = 'fixed';
                    setTimeout(function () {
                        document.body.style.overflow = 'visible';
                    }, 100)

                }
                else if (commandName != "Pin") {
                    document.body.style.position = 'static';
                }
            }

            if ($telerik.isMobileSafari) {
                if (commandName == "Maximize") {
                    window.onscroll = centerDialog;
                    currentDialog = sender;
                }
                else if (commandName != "Pin") {
                    window.onscroll = null;
                    currentDialog = null;
                }
            }
        }

        function centerDialog() {
            if (currentDialog && currentDialog.center) {
                currentDialog.center();
            }
        }
    </script>

I have created a public Ideas & Feedback Portal item, where you can track the issue status, vote for it and comment it.

Regards,
Dimitar
Telerik

 

 

[René]

Hello,

thnx for a workaround, I'll try it.

But, it seems it is based on OnClientCommand. It should work. But - another situation is, that we have fixed sized window with scrollable content  centered on screen, modal and with close behavior only. So there is no client event. How to prevent overlay scrolling in this case? Now we need user can scroll only inside this modal window. But it is the same. He can scroll down than whole overlay scrolls up/down. Is there any Init event or something where it can be fixed?

Again, you can test it on Telerik demo site listed in 1st post. Just load page and use non maximized modal window. Simply use touch and scroll down. It is possible to scroll with window or simply drag overlay.

[Dimitar]

Hello,

The second scenario described is expected behavior of a modal RadWindow. It can be observed both on desktop and on mobile browsers -  the page behind a modal RadWindow can be scrolled if you scroll outside the window borders.
However, you may use a similar approach as the one implemented in the previous case and control the body tag styles. In order to achieve the desired behavior, follow this example:

<telerik:RadButton ID="RadButton1" runat="server" Text="Show Window" OnClientClicked="OnClientClicked" AutoPostBack="false"></telerik:RadButton>
            <telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="false" Modal="true" OnClientShow="OnClientShow" OnClientClose="OnClientClose" />

<script type="text/javascript">
        function OnClientClicked() {
            var wnd = $find("RadWindow1");
            wnd.show();
        }

        function OnClientShow() {
            document.body.style.position = 'fixed';
            setTimeout(function () {
                document.body.style.overflow = 'visible';
            }, 100)
        }

        function OnClientClose() {
            document.body.style.position = 'static';
        }
    </script>

In this case I have used a RadButton to show the window - it is just for the demo purposes and it is not required for the final effect. The two RadWindow events that we have handled do the real job.
When the window is shown, we use the OnClientShow event to set the appropriate styles to the body element. And when we close the window, the OnClientClose event is used to reset body styles.
Note that the behavior achieved is valid for both for desktop and mobile browsers. If you would like to implement different behavior for either desktop or mobile browsers, you may follow the logic from the workaround in my previous post and add conditional statements for touch device browsers.


Regards,
Dimitar
Telerik

 

 

[René]

Hello,

just checked your solution and it is useless for me because of position = 'fixed'.

Let's say, we have long scrollable page and there is somewhere link to open window. Setting fixed position on body scrolls whole page to top. Then window is opened. BTW seems that on Android window is opened on original position, before fixed position is applied. So simply main page scrolls to 0,0 (fixed position) and window opens somewhere in position 0, XX. Ok, let's say we can move window after open to any location. It should work. But customer want to see main page as is. He doesn't want to scroll to top, because after windows closes, he want to continue. Scrolling is not acceptable here.

All works fine in desktop. You can't scroll with overlay. Only tablets/phones are affected and it is not acceptable for our customers. They want to scroll with window content, no with overlay.

And last thing, you said "the page behind a modal RadWindow can be scrolled if you scroll outside the window borders". It is not true. I'm trying to scroll ONLY inside RadWindow and it scrolls with overlay. Maybe you want another example page to attach?

Regards René

[René]

Hello,
please check attached example. Expected behavior is:
- User can scroll page top/down
- Button opens modal window - modal means no scroll/drag is available for main page. Only window is visible and active and centered in screen.
- Main page under window stays in the same position as before (no scroll to top or anywhere)
- User can scroll in window (long content) but page is not scrollable. User can NOT scroll/drag anything.
- Closing window just disables overlay and user can continue

It must work in desktop and mobile devices.

Regards René

Example page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="RadWindowsJS.test" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <style>

        html,
        body
        {
            margin: 0px;
            padding: 0px;
            border: 0px;
            color: #000000;
        }

    </style>

    <script type="text/javascript">

        function OnClientClicked()
        {
            var wnd = $find("RadWindow1");
            wnd.show();
            wnd.center();
        }

        function OnClientShow()
        {
            document.body.style.position = 'fixed';
            setTimeout(function ()
            {
                document.body.style.overflow = 'visible';
            }, 100)
        }

        function OnClientClose()
        {
            document.body.style.position = 'static';
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>

        <telerik:RadWindowManager ID="rwm" ShowContentDuringLoad="True" VisibleStatusbar="False" ReloadOnShow="True" runat="server" Behavior="Default" DestroyOnClose="true">
        </telerik:RadWindowManager>


        Page start -> scroll down
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

        Another text -> scroll down

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

        <telerik:RadButton ID="RadButton1" runat="server" Text="Show Window" OnClientClicked="OnClientClicked" AutoPostBack="false"></telerik:RadButton>
        <telerik:RadWindow ID="RadWindow1" runat="server" ClientIDMode="Static" Modal="true" Width="500" Height="500" OnClientShow="OnClientShow" OnClientClose="OnClientClose" >
            <ContentTemplate>
                <div>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                    Long text -> scroll down <br/>
                </div>
            </ContentTemplate>
        </telerik:RadWindow>

        <br />
        <br />

        Page end

    </form>
</body>
</html>

[Dimitar]

Hello René,

You can achieve this behavior on mobile devices by canceling touchstart and touchmove for the "TelerikModalOverlay" div. On desktop, this is achieved by setting overflow hidden to body. You can use the following sample as base to get the desired behavior:

<script type="text/javascript">
    //Prevent scroll on touch devices
    document.addEventListener('touchstart', this.touchstart);
    document.addEventListener('touchmove', this.touchmove);

    function touchstart(e) {
        if (event.target.className == "TelerikModalOverlay") {
            event.preventDefault();
        }
    }

    function touchmove(e) {
        if (event.target.className == "TelerikModalOverlay") {
            event.preventDefault();
        }
    }

    //Prevent scroll on desktop
    var bodyOverflow = "";
    var htmlOverflow = "";

    function OnClientClicked() {
        var wnd = $find("RadWindow1");
        wnd.show();
        if (!$telerik.isTouchDevice) {
            //store the overflow
            bodyOverflow = document.body.style.overflow;
            htmlOverflow = document.documentElement.style.overflow;
            //hide the overflow
            document.body.style.overflow = "hidden";
            document.documentElement.style.overflow = "hidden";
            wnd.add_close(closeHandler);
        }
    }

    function closeHandler(sender, args) {
        //restore the overflow
        document.body.style.overflow = bodyOverflow;
        document.documentElement.style.overflow = htmlOverflow;
        sender.remove_close(closeHandler);
    }
</script>

I am sending you the sample page with the fix applied. Note that ClientIDMode="Static" is not supported in RadWindow. In the sample I have used ClientIDMode="AutoID" instead.

You can further customize this to attach the touchstart and touch move handlers dynamically (e.g., in the OnClientShow event of the RadWindow) and remove them in the OnClientClose event (or any other event that suits your needs).

I would also like to point out that letting any element scroll is the default behavior of a touch-enabled browser and RadWindow is merely a collection of HTML, CSS and JavaScript. True modality cannot be achieved with this technology, only real browser modal popups can provide this. Thus, the fact that the user can still scroll a long page on a mobile device is to be expected and the developer would need to make sure the exact application requirements are met by writing the necessary code.


Regards,

Dimitar
Telerik

 

 

[Kiran]

I have been looking for some resources that could help me with setting the radwindow in the center of the tablet screen. After ages of research I came here only to be successful in my attempt. Thank you loads for this post. 

[Kiran]

Hi,

Is there a way that my radwindow could automatically move up as the virtual keyboard covers up the radwindow and does not allow the user to see what they are typing in the textboxes?

Alternatively, what I could do is to position the radwindow in the center of the screen horizontally and to the top (vertically) so that the keyboard does not hover over the radwindow.

Please help me with the code that would make either of the things possible.

Thank you.

[Marin Bratanov]

Hello Kiran,

I've already answered your other thread with the same question and you can find my answer in the following permalink: https://www.telerik.com/forums/modal-radwindow-position-always-in-the-center#RHDBRZarU0q2f96IqqLegw.

Regards,
Marin Bratanov
Progress Telerik