This is a migrated thread and some comments may be shown as answers.

Page Scrolling Problem with Modal Popups

3 Answers 393 Views
Window
This is a migrated thread and some comments may be shown as answers.
John Fetherolf
Top achievements
Rank 1
John Fetherolf asked on 22 Oct 2009, 07:00 PM
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

3 Answers, 1 is accepted

Sort by
0
John Fetherolf
Top achievements
Rank 1
answered on 22 Oct 2009, 07:36 PM
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
0
Georgi Tunev
Telerik team
answered on 23 Oct 2009, 09:59 AM
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.
0
John Fetherolf
Top achievements
Rank 1
answered on 23 Oct 2009, 01:20 PM

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
Tags
Window
Asked by
John Fetherolf
Top achievements
Rank 1
Answers by
John Fetherolf
Top achievements
Rank 1
Georgi Tunev
Telerik team
Share this question
or