Automatically Sized Popup Forms

[Shawn]

I had to struggle with this one a while, but I finally found a solution and I thought I would share it. I don't like fixed-width popup edit forms because they can really screw up on different systems, but the RadGrid automatically affixes a width=400px style if you don't specify one. I found a way to remove this and get the popup to center anyway.
(Forgive me for not showing this as code, but I haven't figured out how to do that yet.)

function PopUpShowing(sender, eventArgs) {
// Get the popup element
popUp = eventArgs.get_popUp();

// Remove the style attribute. This removes the 'width' attribute that RadGrid puts in automatically.
popUp.removeAttribute("style");

// Add the fixed position attribute back in. (Note: This has to be done before getting the size element)
popUp.style.position = "fixed";

// Get the main window size and the popup sizes
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
var popUpWidth = popUp.offsetWidth;
var popUpHeight = popUp.offsetHeight;

// Center the popup window to the main window
popUp.style.left = Math.floor((viewportWidth - popUpWidth) / 2) + "px";
popUp.style.top = Math.floor((viewportHeight - popUpHeight) / 2) + "px";
}

[Maria Ilieva]

Hello Shawn,

Thank you for sharing this solution.
It will be of a big help for all other users that are implementing similar scenarios.

Regards,
Maria Ilieva
Telerik