RadWindow on touch devices

7 posts, 0 answers
  1. Raptor
    Raptor avatar
    19 posts
    Member since:
    Aug 2011

    Posted 20 May 2014 Link to this post

    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
  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 22 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Raptor
    Raptor avatar
    19 posts
    Member since:
    Aug 2011

    Posted 23 May 2014 in reply to Dimitar Link to this post

    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.
  5. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 23 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Raptor
    Raptor avatar
    19 posts
    Member since:
    Aug 2011

    Posted 28 May 2014 in reply to Dimitar Link to this post

    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é

  7. Raptor
    Raptor avatar
    19 posts
    Member since:
    Aug 2011

    Posted 28 May 2014 Link to this post

    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>
     
    <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>



  8. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 02 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017