NOTE: Toolset Used was Q2 2009.
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):
The following code centers the window as expected:
var win = $find('<%= myWindow.ClientID %>'); |
if (win) { |
if (!win.isClosed()) { |
win.center(); |
} |
} |
However change the size at any point and the window will not center:
var win = $find('<%= myWindow.ClientID %>'); |
if (win) { |
if (!win.isClosed()) { |
win.center(); |
win.set_height(document.body.clientHeight); |
} |
} |
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):
var win = $find('<%= myWindow.ClientID %>'); |
if (win) { |
if (!win.isClosed()) { |
win.center(); |
win.set_height(document.body.clientHeight - 2); |
} |
} |
4 Answers, 1 is accepted
0
Hi Xorcist,
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,
Georgi Tunev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
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,
Georgi Tunev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Xorcist
Top achievements
Rank 1
answered on 15 Dec 2009, 03:17 PM
Switching the order of setting the height and centering the window had no effect. My doctype is exactly as you have listed it. I did a little digging and it appears that .center() calls .moveTo(), so I tried the following:
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.
var win = $find('<%= myWindow.ClientID %>'); |
if (win) { |
if (!win.isClosed()) { |
win.set_height(document.body.clientHeight); |
var h = win.get_height(); |
var w = win.get_width(); |
win.moveTo(((document.body.clientWidth - w) / 2), ((document.body.clientHeight - h) / 2)); |
} |
} |
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.
0
Hello Xorcist,
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.
Kind regards,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
I tried to reproduce the issue but unfortunately to no avail - please examine the following code on your side:
<%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
style
type
=
"text/css"
>
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"sc"
runat
=
"server"
>
</
asp:ScriptManager
>
<
script
type
=
"text/javascript"
>
function Test()
{
var win = $find('<%= win.ClientID %>');
if (win) {
if (!win.isClosed()) {
win.set_height(document.body.clientHeight);
win.center();
}
}
}
</
script
>
<
telerik:RadWindow
ID
=
"win"
runat
=
"server"
VisibleOnPageLoad
=
"true"
KeepInScreenBounds
=
"true"
>
</
telerik:RadWindow
>
<
asp:Button
ID
=
"btn"
runat
=
"server"
OnClientClick
=
"Test(); return false;"
Text
=
"Test"
/>
</
form
>
</
body
>
</
html
>
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.
Kind regards,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Xorcist
Top achievements
Rank 1
answered on 17 Dec 2009, 04:16 PM
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:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head runat="server"> |
<title></title> |
<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> |
</head> |
<body style="margin:0px; scroll:none;"> |
<form id="form1" runat="server"> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
<Scripts> |
<asp:ScriptReference Assembly="Telerik.Web.UI, Version=2009.2.826.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.Core.js" /> |
<asp:ScriptReference Assembly="Telerik.Web.UI, Version=2009.2.826.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQuery.js" /> |
</Scripts> |
</telerik:RadScriptManager> |
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> |
</telerik:RadAjaxManager> |
<telerik:RadWindowManager ID="RadWindowManager1" runat="server"> |
<Windows> |
<telerik:RadWindow |
id="myWindow" |
runat="server" |
showcontentduringload="false" |
KeepInScreenBounds="true" |
width="500px" |
height="300px" |
behaviors="Close, Maximize, Minimize, Move, Reload, Resize" |
NavigateUrl="http://www.google.com" |
> |
</telerik:RadWindow> |
</Windows> |
</telerik:RadWindowManager> |
<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1"> |
<script type="text/javascript"> |
window.onload = setDivArea; |
window.onresize = setDivArea; |
function setDivArea() { |
var myWidth = 0, myHeight = 0; |
if (typeof (window.innerWidth) == 'number') { |
//Non-IE |
myWidth = window.innerWidth; |
myHeight = window.innerHeight; |
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { |
//IE 6+ in 'standards compliant mode' |
myWidth = document.documentElement.clientWidth; |
myHeight = document.documentElement.clientHeight; |
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { |
//IE 4 compatible |
myWidth = document.body.clientWidth; |
myHeight = document.body.clientHeight; |
} |
var div = $get('divContent'); |
div.style.height = (myHeight - 2) + 'px'; |
div.style.width = (myWidth - 2) + 'px'; |
centerWindow(); |
} |
function openWindow() { |
var win = $find('<%= myWindow.ClientID %>'); |
win.show(); |
} |
function centerWindow() { |
var win = $find('<%= myWindow.ClientID %>'); |
if (win) { |
if (!win.isClosed()) { |
win.center(); |
} |
} |
} |
function maximizeWindow(dim) { |
var win = $find('<%= myWindow.ClientID %>'); |
if (win) { |
if (!win.isClosed()) { |
switch (dim.toLowerCase()) { |
case 'height': |
win.set_height(document.body.clientHeight); |
break; |
case 'width': |
win.set_width(document.body.clientWidth); |
break; |
} |
} |
} |
} |
function resetWindow() { |
var win = $find('<%= myWindow.ClientID %>'); |
if (win) { |
if (!win.isClosed()) { |
win.set_height(300); |
win.set_width(500); |
win.center(); |
} |
} |
} |
</script> |
</telerik:RadScriptBlock> |
<div id="divButtons" style="background-color:#cccccc; border:solid 1px #000000; left:5px; padding:3px; position:absolute; top:5px; z-index:9999;"> |
<asp:button ID="btnOpen" runat="server" Width="150px" Text="Open Window" OnClientClick="openWindow(); return false;" /> |
<asp:button ID="btnCenter" runat="server" Width="150px" Text="Center Window" OnClientClick="centerWindow(); return false;" /> |
<asp:button ID="btnHeight" runat="server" Width="150px" Text="Maximize Height" OnClientClick="maximizeWindow('Height'); return false;" /> |
<asp:button ID="btnWidth" runat="server" Width="150px" Text="Maximize Width" OnClientClick="maximizeWindow('Width'); return false;" /> |
<asp:button ID="btnReset" runat="server" Width="150px" Text="Reset Window" OnClientClick="resetWindow(); return false;" /> |
</div> |
<div id="divContent" style="border:solid 1px #ff0000;"> |
</div> |
</form> |
</body> |
</html> |
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.