Topposition of window is wrong

[Manfred]

I try to use RadWindow for display of a confirmdialog that enables the user to say yes or no to a question. This window is placed on the page within a RadWindowManager. The problem is, that the content on the page is centered using a style on the form-tag. The content is always 1022 pixel wide and 720 pixel high, so the form-tag looks like this:

<form name="form1" method="post" action="default.aspx" id="form1" style="position:absolute;left:50%;top:50%;margin-left:-511px;margin-top:-360px;">

When the style is set like this, then all content of the form is centered in the browser, even if the user changes the size of the browserwindow. Unfortunately the RadWindow is only centered horizontally (nearly), The top of the Window is above the top of the content.

I think the problem has to do with the absolute positioning of the elements. Has anyone an idea how i can have the content centered in the browser window and also have the RadWindow centered within the content?

[Shinu]

Hello Manfred,

Try calling the Center() method for RadWindow as shown below.

JS:

function Open()
{
   var window = $find('<%= RadWindow1.ClientID %>');
   var window = radopen("http://www.gogle.com", null);
   window.Center();
  window.show();
}

-Shinu.

[Manfred]

Hello Shinu,

thanks for the answer. i think the second line starting with var window is obsolete. but it doesn't find the window when i try it. i have an element RadWindow that has the id "wnd". This element is created in the method OnPreLoad of the aspx-page. the RadWindowManager that contains this window gets the call to Open() in OnClientShow. what am i doing wrong?

[update]
meanwhile i managed it to show the window. unfortunately it is not centered to the area of the form but to the browser window. Then it seems that the position is shifted down and right to the amount of the top-left-position of the form.

[update 2]
i think i found the solution. i calculate the position of the window from the top left corner of the form and set the properties top and left of the RadWindow. then i set the behaviour to None, so that the window cannot be moved or resized. maybe this works. i will check it on monday.

[Marin Bratanov]

Hi Manfred,

Let me shed some light on the rendered HTML so that we can clear the reason for this behavior. The RadWindow's popup element (i.e. the one that you see) is rendered as a direct child of the form element, since in ASP all other controls/elements are there, too. This is done so that it does not inherit any visibility restrictions from its parents. This is, however, not happening in your case, as you have some positioning and margins set to the form element (namely the absolute positioning), which is also inherited by the RadWindow's markup, which also is wrapped in an absolutely positioned div. Therefore these two positionings interfere with one another. This is the way HTML works and you can easily see it with the following markup in an empty page:

<div style="position: absolute; top: 200px; left: 200px; width: 100px; height: 100px; background-color: Green;">
    <div style="position:absolute; top: 200px; left: 200px; width: 100px; height: 100px; background-color: Yellow;">
        content
    </div>
</div>

The yellow div will have 400px offset instead of 200 as it also counts the parent's position. This is exactly what is happening in your case (although simplified).

What I can advise is that you have a div as a child of the form and set these styles to this div, then have your content inside it. This will allow you to keep your positioning, while having no such rules for the form element will allow the RadWindow to position itself correctly.

All the best,
Marin
the Telerik team

[Manfred]

Hi Marin,

unfortunately adding a div and setting the style to this instead of the form doesn't work. The window is still shown above the top of the area where the other controls are. The RadMenu that i also added to the dialog is positioned correctly. Also the RadMenu is not disabled when i set the property Modal in the window to true. Strange behaviour. I will try to make an example of what i am doing to show you what happens. Maybe this takes some time.

[Marin Bratanov]

Hello Andi,

I have just answered your support ticket on the matter and I will paste the most important sections of this reply here as well for others that may have a similar issue.

I will start, however, with your last questions from this thread  - for moving the styles to a div - this worked fine with the example you attached on my end, but I also removed the styles from the form element. Can you confirm you have also cleared the form in your case?

On the RadMenu staying above the modal RadWindow - this is due to the default z-index values the controls have (3000 for the RadWindow and 7000 for the RadMenu). A detailed list and a solution are offered in the following help topic: http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html.



Now, back to the original issue with the centering of the RadWIndow. I am sorry for initially missing the fact that you want the RadWindow to stay in the center of the browser, I was under the impression that only its position was wrong. Please accept my apologies for that. Here follows a small code snippet that will keep the RadWindow centered:

var TO;
var oWnd;
function pageLoad()
{
    oWnd = GetRadWindowManager().GetWindowByName("wnd");
    $telerik.$(window).resize(function ()
    {
        clearTimeout(TO);
        TO = setTimeout(centerRadWindow, 100); //some timeout that prevents numerous event fires
    });
}

function centerRadWindow()
{
    oWnd.center();
}

For this scenario I can also suggest the utilization of the RadNotification control - it offers the ability to stay in its place on the screen regardless of browser resizing, and this is done out of the box. An example would be:

<telerik:RadNotification runat="server" ID="rn1" Position="Center" Width="450px"
    Height="400px" VisibleOnPageLoad="true" AutoCloseDelay="0" TitleIcon="http://www.telerik.com/favicon.ico"
    ShowCloseButton="false" Title="Bestдtigung">
    <ContentTemplate>
        <iframe style="width: 100%; height: 100%;" src="www.bing.com"></iframe>
    </ContentTemplate>
</telerik:RadNotification>

I hope this helps you advance in your project.


Greetings,
Marin
the Telerik team