This is a migrated thread and some comments may be shown as answers.

Center radalert/radprompt/radconfirm with large content

7 Answers 442 Views

Window

This is a migrated thread and some comments may be shown as answers.

Inception asked on 11 Nov 2010, 10:21 AM

We're using the radalert, radprompt and radconfirm windows to replace the browser's default dialogs. The problem we're experiencing is when providing text to these windows that is larger then expected. The windows do size nicely vertically. The trouble is that the windows do not get centered correctly. When calculating the height of the window, it seems that the default given size is used instead of the actual size of the windows.

So let's say I open a radalert with width=300 and height=200. Due to the large content provided to the radalert window, the height of the window in effect becomes larger than 200, say 350. As a result the radalert gets centered correctly horizontally, but it's off-centre vertically. It looks like the calculation of the position still uses a height of 200 instead of the actual 350. I have digged into the code and tried to manually fix this, but I can't figure out how to do it. Any suggestions?

7 Answers, 1 is accepted

answered on 11 Nov 2010, 04:44 PM

Thank you for your response Svetlina. How would I add a show handler to a radalert? As far as I know the radalert return the window, but by that time it's already shown. However that may be, I have tried adding the handler after radalert returns the window and showing the alert window again. The showhandler gets called then and I call center on the sender (the window). But it doesnt do anything. It looks something like this.

var wnd = radalert('Replace this witha huge amount of text', 300, 100);

wnd.add_show(showhandler);

wnd.show();

function showhandler(sender, eventArgs) {

sender.center();

alert('centered?');

}

Obviously I have tried call wnd.center() after the radalert function returns, but that doesn't help either. When I dig through the source or debug the javascript, it really looks like the height that is providing at the radalert() call is used no matter what. Am I missing something? If so, could you provide me with a piece of working sample code?

Thank you!

answered on 16 Nov 2010, 12:33 PM

Hello guys,

I examined the setup further and it turned out that the radalert code calculates the central bounds based on the size. If you do not provide explicit size, however, it sets default one and thus the centering is not correct.

To get the desired result, you should set size. I understand that you may not know it when opening teh alert and thus I suggest to use the following code which gets it from the content element size:

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="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>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<script type="text/javascript">

function callAlert()

{

var oAlert = radalert("test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content test content ");

resizePopup(oAlert);

oAlert.center();

}

function resizePopup(oAlert)

{

var contentElement = oAlert.get_contentElement();

var height = contentElement.offsetHeight;

var width = contentElement.offsetWidth;

oAlert.setSize(width, height);

}

</script>

<button onclick="callAlert();return false;">

test

</button>

<telerik:RadWindowManager ID="mng" runat="server">

</telerik:RadWindowManager>

</form>

</body>

</html>

Please, tets this solution and let me know how it goes.

Regards,
Svetlina
the Telerik team

Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.