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.
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.
7 Answers, 1 is accepted
0
Accepted
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.
Regards,
Dimo
the Telerik team
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!
0
Einar Dahle
Top achievements
Rank 1
Rank 1
answered on 26 Feb 2013, 12:22 PM
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
0
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
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!
0
Einar Dahle
Top achievements
Rank 1
Rank 1
answered on 27 Feb 2013, 05:05 AM
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
with kendo web version v2012.3.1315, the same window appears
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? )
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 {
}
with kendo web version v2012.3.1315, the same window appears
element.style {
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? )
0
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
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!
0
Oscar
Top achievements
Rank 1
Rank 1
answered on 26 Mar 2013, 01:44 PM
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.
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.
0
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
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!