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

Automatically Sized Popup Forms

1 Answer 13 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 1
Shawn asked on 11 Sep 2014, 03:25 PM
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";
}

1 Answer, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 16 Sep 2014, 10:51 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Shawn
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Share this question
or