RadWindow.center(); not working after manual size change.

5 posts, 0 answers
  1. Xorcist
    Xorcist avatar
    98 posts
    Member since:
    Apr 2009

    Posted 14 Dec 2009 Link to this post

    NOTE: Toolset Used was Q2 2009.

    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);     
              }     
            } 
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 15 Dec 2009 Link to this post

    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.
  3. Xorcist
    Xorcist avatar
    98 posts
    Member since:
    Apr 2009

    Posted 15 Dec 2009 Link to this post

    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:

            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.
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 17 Dec 2009 Link to this post

    Hello Xorcist,

     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">
    <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.
  5. Xorcist
    Xorcist avatar
    98 posts
    Member since:
    Apr 2009

    Posted 17 Dec 2009 Link to this post

    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 = 0myHeight = 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.
Back to Top