RadWindow off top of screen

6 posts, 0 answers
  1. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 14 Oct 2014 Link to this post

    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!
  2. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 15 Oct 2014 in reply to Stephanie Link to this post

    Anyone?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 16 Oct 2014 Link to this post

    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
     

    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.

     
  5. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 16 Oct 2014 in reply to Marin Bratanov Link to this post

    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?
  6. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 16 Oct 2014 in reply to Marin Bratanov Link to this post

    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....?
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 20 Oct 2014 Link to this post

    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
     

    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