The following code centers the window as expected:
However change the size at any point and the window will not center:
Can someone explain why this is and possibly provide a workaround. I'm resizing my window to match the browser height, but I want it maintain a centered position if they happen to expand the browsers width.
* UPDATE: Actually it doesn't seem to center only when the height is exactly the same as the internal browser height. The following codes does work (but doesn't look as nice):
4 Answers, 1 is accepted
Try setting the height first and center the dialog after that. Also make sure that you are using XHTML compliant DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
All the best,
the Telerik team
This also failed... once again changing document.body.clientHeight to document.clientHeight -2 made it work. I even went so far as to use .moveTo(((document.body.clientWidth - w) /2), 0) which also failed... and I know for a fact ((document.body.clientWidth - w) /2) returned a positive integer value.
So I took a look at the .moveTo() function and it looks like it does some bounds checking, and I just happened to have KeepInScreenBounds set to true for my window. Turning this off made the centering work as expected. So I suspect there is an issue with the bounds checking routine (when the window is exactly on the edge of the bounds, not beyond it). I haven't dug any further into the code though.
I tried to reproduce the issue but unfortunately to no avail - please examine the following code on your side:
Would you please test this code and let me know what should I do or property I should set to observe the issue? Once I am able to examine the problem locally, I will do my best to help.
the Telerik team
Okay this is all starting to come together. I ran your sample and can see that it works 100%. What's different between yours and mine is that I don't set html, body, or form to be 100%. Instead use a div and adjust it to be the size of the viewport. Here is my entire sample:
Now I compared your app to mine and tossed some borders on your html, body, and form (and my div); and noticed that when I set the height of the window to be document.body.clientHeight, the window was actually 1 pixel less than the size of the viewport with your code (leaving the html border exposed at the top of the screen), and with my code it did not, it was the entire height of the viewport. I think this is where it's breaking, and more specifically in IE; I tested my code in Firefox and it worked as expected. Seems that the div allows the window to set it's height beyond what it normally would with just html height:100% in IE (in terms of bounds checking); Strangley enough though, with my code, resizing the browser does not recenter the window, but after a resize clicking my center button will center the window... odd.
In any event, this is probably not a normal scenerio for general use of the Window control, and I do have a workaround by turning KeepInScreenBounds="false" in the RadWindow.