Page Scrolling Problem with Modal Popups

4 posts, 0 answers
  1. John Fetherolf
    John Fetherolf avatar
    17 posts
    Member since:
    Sep 2008

    Posted 22 Oct 2009 Link to this post

    I am trying to update our main site to the latest version of the controls and am getting flaky page scrolling behavior out of modal RadWindows. 

    I have a link button at the bottom of a page that, when rendered, is at mimimum 2x the height of the normal browser view height.  It is a "Order Summary" button under an ever-growing grid of line items on an order (hopefully this explains what I mean).  Anyway the user has to scroll the browser to see the button.  The button displays a modal RadWindow with the order summary page in it by doing a show(); and a center(); on the client side as well as setting KeepInScreenBounds = true on the server-side object. 

    No matter what I have tried, the underlying page scrolls to the top and the modal RadWindow appears below the scroll window of the browser.  You then have to re-scroll to the bottom of the page to see the popup.

    Any help I can get to turn off this behavior would be greatly appreciated.

    Thanks,
    Kevin

    Kevin M. Betts
    Web Developer
    Kimball Midwest
  2. John Fetherolf
    John Fetherolf avatar
    17 posts
    Member since:
    Sep 2008

    Posted 22 Oct 2009 Link to this post

    Some extra info:  My popup page is just eight asp:Label tags and an asp:LinkButton (btnDone).

    As a follow up, after some testing, I discovered the following.  My javacript for the popup page looks like this:

    function onpageload() {  
        document.onkeydown = OnPageKey;  
    //      
    //    btnDone.focus();  
    //    btnDone.focus();  
    }  
     
    //  Make the page behave like a Windows popup dialog.  
    function OnPageKey(evt) {  
        var thisKey = (evt) ? evt.which : window.event.keyCode;  
          
        switch(thisKey) {  
            case keyEnter:  
            case keyEscape:  
                CloseRadWindow();  
                break;  
        }  
          
        return true;  
    }  
     

    If I uncomment the btnDone.focus(), the underlying page scrolls to the top.  As shown here it doesn't.  Of course, as shown here, the keyboard handler doesn't work because the underling page still has focus.

    So any help explaining this would still be appreciated.

    Thanks,
    Kevin
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 23 Oct 2009 Link to this post

    Hello John,

    It is browsers' default behavior to jump the page in order to ensure that the focused element will be visible on the page - you will experience the same behavior if you open an IFRAME with src set to your content page, instead of opening a RadWindow.
    Try setting ShowContentDuringLoad to false for that RadWindow - I hope it will be of help.


    Greetings,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. John Fetherolf
    John Fetherolf avatar
    17 posts
    Member since:
    Sep 2008

    Posted 23 Oct 2009 Link to this post

    I had ShowContentOnLoad = false and I think that was the issue.  The focus() was happening before the control was actually fully visible which was causing IE to "jump" to the top of the underlying page.  When I set ShowContentOnLoad = true the underlying page jump went away but then I got a nasty "double load" visual effect when bringing the up the popup screen more than once.  So basically the best solution was to basically put the focus on a timer to ensure that the button control was visible like so:

     

    function onpageload() {  
        document.onkeydown = OnPageKey;  
        window.setTimeout("btnDone.focus();", 100);  
    }  
     
    //  Make the page behave like a Windows popup dialog.  
    function OnPageKey(evt) {  
        var thisKey = (evt) ? evt.which : window.event.keyCode;  
          
        switch(thisKey) {  
            case keyEnter:  
            case keyEscape:  
                CloseRadWindow();  
                break;  
        }  
          
        return true;  
    }  
     

    Now both the keyboard handler works and no underlying page jump.

    Thanks for the help.

    Kevin
Back to Top