RadWindow off top of screen

[DogBizPro]

We have an issue where the Rad window is off the top of the screen on the iPad and it cannot be scrolled back into view, thus clients cannot enter into the first few fields on the window. Interestingly enough this only seems to happen when we set the focus on the first (or any) field on the window. We want to do this so the clients can start typing right away and do not have to select the first box themselves. 

Please Help!! Big Issue for our clients!

[DogBizPro]

Anyone?

[Marin Bratanov]

Hello Stephanie,

A common reason for such behavior is focus being set to the textbox too early. Sometimes browsers do not calculate the absolute position of this textbox in the RadWindow's iframe and consider it to be the beginning of the form, so they attempt to scroll it into view and this pushes the RadWIndow titlebar out of the viewport.

To avoid this, you can try focusing the textbox with a small timeout on the client, instead of the server Focus() method. For example:

function focusMyTextBox() {
    setTimeout(function () {
        $get("<%=myTextBox.ClientID%>").focus();
    }, 0);
    Sys.Application.remove_load(focusMyTextBox);
}
Sys.Application.add_load(focusMyTextBox);

where you can try increasing the timeout. Another option would be to call the center() method of the RadWindow after focusing the textbox if this does not help as-is.

Regards,

Marin Bratanov
Telerik

 

 

[DogBizPro]

I will give that a shot but the funny thing is, even the focused text box is off the visible area on the iPad. That is the only device/browser I have found the issue in. If I use Google on the iPad it works just fine. The issue is only in Safari on the iPad. I am skeptical that this will fix it since, like I mentioned, the focused box is off the screen as well. Any other ideas?

[DogBizPro]

Okay that doesn't even focus on the text box. The window is still displayed all on screen, but the text box in not focused and ready to type in on the iPad or in Chrome on my PC....?

[Marin Bratanov]

Hello Stephanie,

This behavior is really odd. Can you confirm that you have replaced myTextBox with the actual ID of the textbox you want focused? Have you tried calling the RadWindow's center() method after the focus() call, as well as calling center() with a timeout, e.g.:

function focusMyTextBox() {
    setTimeout(function () {
        $get("<%=myTextBox.ClientID%>").focus();
        setTimeout(function () {
            GetRadWindow().center();
        }, 300);
    }, 0);
    Sys.Application.remove_load(focusMyTextBox);
}
Sys.Application.add_load(focusMyTextBox);

The problem is that there are no events fired when the keyboard shows, so we cannot know when this happens, how long it takes and what is the change to the screen, so you can fiddle with the nested timeout as well. You may also find interesting this approach from StackOverflow for getting back the content to the initial scrolling position: http://stackoverflow.com/questions/2593139/ipad-web-app-detect-virtual-keyboard-using-javascript-in-safari. You may need to change the scrollTop of the parent page (http://www.telerik.com/help/aspnet-ajax/window-programming-calling-functions.html) and perhaps store the original offset before focusing the textbox.

You can also try recentering/resizing/moving the RadWIndow when the viewport size changes as shown here: http://www.telerik.com/support/kb/aspnet-ajax/window/details/setting-size-in-percent-for-the-radwindow.


Regards,

Marin Bratanov
Telerik