kendoWindow.center() doesn't work when inside an iframe

8 posts, 1 answers
  1. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 07 Feb 2013 Link to this post

    Hello Kendo team:
    If you have a kendoWindow inside an iframe, it doesn´t center the window vertically as far as appending the window to document.body exceeds 100% of the height of the viewport.
    I've checked this issue in version 2012.3.1406 with IE10.
    I'm attaching an example to reproduce this. You can paste these two HTML files to your window's examples and open api1.html from IE10.

    toFront() function in line 41200 of kendo.web.js makes a winElement.focus() that changes the $(window).scrollTop()
    kendoWindow uses $(window).scrollTop() to determine the center of the viewport.

    This worked fine with version 2012.2.710.

    Hope it helps you to find a faster solution.

    Kind regards.
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Feb 2013 Link to this post

    Hi Oscar,

    The observed problem is expected to occur when the scenario is configured as in the attached page. Here is why:

    When the Window content <div> is appended to the page <body> as a last child and there is not enough room in the currently visible area, the page length increases. The Window receives focus, which causes the page to scroll to the bottom. Then the center position is calculated and the widget is repositioned, however, when it is moved to the center of the screen, the page length decreases and the Window appears again to be at the bottom. This behavior is not browser-specific.

    The focusing is carried out, so that the Window can accept commands from the keyboard. This is something new, which was not present in the older version that you have been using. With the latest version, you can initialize the Window as hidden (visible:false setting) and then center and open it.

    $(someDomElement).kendoWindow({
        visible: false
    }).data("kendoWindow").center().open();


    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Einar Dahle
    Einar Dahle avatar
    10 posts
    Member since:
    Jun 2010

    Posted 26 Feb 2013 Link to this post

    Hi Dimo

     

    This is the same issue I’m also having. When I apply your solution window appears with a flicker. it does improve the position a bit but not exactly centered vertically. this issue came after updating the project with the latest kendo web version. (v2012.3.1315)

    Regards

    Shivanka

  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Feb 2013 Link to this post

    Hello Shivanka,

    I suppose you observe that the Window appears a little below the expected location. You can use the following workaround:

    http://www.kendoui.com/forums/ui/window/centering-issues.aspx

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Einar Dahle
    Einar Dahle avatar
    10 posts
    Member since:
    Jun 2010

    Posted 26 Feb 2013 Link to this post

    Hi Dimo,

           Solution you suggested make no difference. for you to understand my situation I will give some stats.
    with kendo web version v2012.2.913 this particular window appeared 
    element.style {
    1. padding-top44px;
    2. top86px;
    3. left256.5px;
    4. z-index10002;
    }

    with kendo web version v2012.3.1315, the same window appears

    element.style {
    1. padding-top44px;
    2. displayblock;
    3. top459.5px;
    4. left256.5px;
    5. z-index10005;
    6. opacity1;
    7. -webkit-transformscale(1);

    all dynamic kendo windows are horizontally centered but vertically towards bottom of the screen. only reason for us to move with the latest kendo web was kendo Tree View. latest kendo Tree View works well with Ipad devices. all we want is to center all popups the way it was before. (any difference the way kendo calculate top and left positions? )

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Feb 2013 Link to this post

    Hello Shivanka,

    Did you compare your implementation with the one in the example I provided?

    http://jsfiddle.net/qSBdu/3/show/

    If the cause of the problem is still unclear after making the suggested changes, please modify the jsFiddle demo until the issue is reproduced with the additional CSS styles and send it back for further inspection.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 26 Mar 2013 Link to this post

    Hi Dimo:
    Your workaround has some problem. The up arrow of the vertical scrollbar does not appear. You can check this in http://jsfiddle.net/qSBdu/8/show/
    Kind regards.
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Mar 2013 Link to this post

    Hi Oscar,

    Right. Well, obviously, this workaround cannot be used, so you need to revert to the native Window behavior. Sorry if this causes you inconvenience.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready