ModalPopupExtender does not display at the center

Recently I had to work with the ModalPopupExtender that comes with the AjaxControlToolkit. I’ve worked with it before, but this time it posed a couple of problems (that were caused not because of the toolkit, but rather other things).

Without specifying the “X” and “Y” attributes of the ModalPopUpExtender(MPE) it is supposed to, by default, render at the center of the screen. Sometimes this doesn’t happen. The solution to getting it to render at the center of the screen is adding the following doctype to your page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Even then, my page didn’t seem to display the popup right. Its only later that I discovered that I was using Response.flush on the page to display a “Loading…” screen. This causes the html used for the “Loading…” screen to be the first thing on the page.

Since the DOCTYPE is now forced down the page, the rest of the page does not render as per the specified DOCTYPE. This causes the MDE to render at some other position on the screen (other than the center).

To fix this, Response.Write and Flush your DOCTYPE tag first, so it becomes the first line on the page.

24 Comments

SatyendraJanuary 21st, 2008 at 7:24 pm

Thank you very much!

It saved lot of my time.

Ramesh BhaskarJanuary 21st, 2008 at 11:38 pm

@Satyendra

You are welcome :) . This gave me quite a headache too :D

[...] due to an incorrect DOCTYPE. Usually changing this DOCTYPE will help (as I have pointed out in a previous post of mine). However sometimes it is not possible to change the DOCTYPE as it affects other [...]

SamMarch 11th, 2008 at 5:30 pm

Hey.. thanks buddy.

I am facing the problem for a long time period. Finally your blog save my day.

wow…..

Ramesh BhaskarMarch 12th, 2008 at 1:56 am

@Sam
Glad it helped :)

TCMarch 20th, 2008 at 10:17 pm

I am getting this problem although the DOCTYPE statement is the first line of code on my aspx page (after page and register)… I had to go around with the popup not centering initially by executing a js scroll function on body onload.. My popup is executed on server side (popup.show())

TCMarch 20th, 2008 at 10:18 pm

What does it mean to Response.Write and Flush your DOCTYPE tag first?

Ramesh BhaskarMarch 21st, 2008 at 4:09 am

@TC
The problem I was facing was because my Page.Load event had some contents being written out to the response stream via Response.Write. What happens here is that whatever you have pushed out using Response.Write gets written as the first thing on your page (If you do a view source of your page you will notice that). Therefore, for the DOCTYPE to truly be the first thing on your page, you first use Response.Write to push your it out.

Note: This solves the issue only if it is the same as the problem I was facing. Also, make sure you are using the right DOCTYPE.

Yechiel ZidellMarch 28th, 2008 at 9:21 pm

Hi ramaesh,

I am having a very difficult time with a modalPopup centering issue.
I have several modalPopups on the page - they all work fine.
I also have a grid with an icon in each row that displays a modalPopup as well.
When I launch the modalPopup from the grid in ie, it centers properly in the middle of browser page.
However in FireFox, it centers the top left corner of modalPopup in the middle of the page causing the modalPopup to appear in lower right portion of the page.

Can you please help me?
I would greatly appreciate it.

Ramesh BhaskarMarch 28th, 2008 at 11:53 pm

@Yechiel
I tried something similar in Firefox but it seemed to work fine for me. This used to happen before I made a change to the DLL itself.

KentJuly 16th, 2008 at 1:16 pm

Is it me or is it just silly that when they “center” they put the left edge on the center and the top on the center rather than putting the center truly at half the height and half the width. You can modify this yourself using a negative margin but the drop shadow does not work then and you must create your own.

ThiaguJuly 24th, 2008 at 7:23 pm

Hey, it is not working for me.
I am able to get the modal popup at the center of the page in IE 6. but in IE7 & IE8, it is not
coming in the center.
while googling i got some suggestions, like modifying getClientBound function in the .js script.
I am not able to findout the .js script file locations.
Could you please help me out.

RameshAugust 6th, 2008 at 6:25 am

Thanks for the solution. It works fine for me.

alhambraAugust 12th, 2008 at 9:04 am

Hi mister,

if I use DOCTYPE in my master Page, my modalpopupextender working fine, render at the center of the screen.

but I delete the doctype, not render at the center of the screen.

I have a aspx page that use a Treeview, if a use DOCTYPE not render right.

I don’t want use Doctype, how I get render at the center of the screen my ModalpopupExtender ??

Thanks in advance. Greetings.

Ramesh BhaskarAugust 12th, 2008 at 9:28 am

@Alhambra

The right way to center it would be to use the DOCTYPE. As for the TreeView not rendering correctly if you use a DOCTYPE, is it possible that there is some other css that is causing it to fail in rendering properly? The other option is the manually calculate the co-ordinates and position it on your page (by setting css attributes for top and left) of the panel. I’ve tried the latter and it is terribly cumbersome.

AdhieSeptember 2nd, 2008 at 1:07 am

Misterious DocType, you solve my problem, I though was useless code, and I remove any response.write on header page.

Initially my page contain popupextender was out. Now comes back.

Thanks for your posting, helpful. And please distribute this.

HarryDecember 19th, 2008 at 2:55 pm

THAT WAS SUPER , i WAS PULLING MY HAIR LAST SINCE TWO DAYS REGARDING THIS PROBLEM, THERE SEEMS NOTHING WORKING EXCEPT YOUR SOLUTIONS, BY THE WAY HOW DID YOU GOT THIS IDEA OF ACCESSING DTD ..

i did not read this thing any where on msdn or asp.net sites also.

thanks a lot.

I have one more problem can you help me in this.This is regarding the Validators been not getting fire inside the Update panel there is a tab container control.

have an issue with the validation Controls Not showing up the error message.

I have an UpdatePanel, Inside that updatepanel i have a tabcontainer and i have a tabpanel inside it.I have some controls like textbox and combox and buttons, i have a required filed validator on the controls, The required field validator shows up when first time when i press the submit button, but when i remove the text and then click the button empty the focus is there on the correct textbox which is empty but the error message does not showup.

i can not remove the updatepanel , With out update panel it’s works but i need to have the update panel to avoid a lot of flickering on the screen and due to some more reasons.

can you pls help me out.

for more details below is the code pasted. I am using ASP.NET 2.0 AJAX Extensions, AjaxControlToolkit.

1: Service Details

Please advice ASAP.

THANKS IN ADVACE

HARISH.

thanks

Achutha KrishnanMarch 19th, 2009 at 6:30 am

Normally it works find for me, but this doesn’t works in Safari. When I looked in a forum, they gave a Java Script to Apply:

// register for our events

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

function beginRequest(sender, args){

// show the popup
$find(”).show();

}
function endRequest(sender, args) {

// hide the popup
$find(”).hide();

}

But this script causes a Postback. More over I should click twice to open the Modal Pop Up. Any one have idea in this?

SuperPApril 3rd, 2009 at 2:43 pm

Thanks a lot, it works perfect now…

PuneetJuly 6th, 2009 at 10:29 pm

thax ramesh…
i have done all you said,
bt does not find my luck…

But specifying x of popupextender works fyn…
i have given wrong value but it makes my extender at ‘Center’.

RaviJuly 21st, 2009 at 6:24 am

Hats off!. You saved my day. Uhm…I was clueless…….

danielAugust 28th, 2009 at 2:55 am

Hello. i have a similar problem with placing ModalPopupExtender in center of the screen, when PopupDragHandleControlID property is set (without it works great).
The problem is caused by page’s layout css:

body {
min-width: 630px; /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
/*height:800px;*/
}

#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 150px; /* RC fullwidth + CC padding */
}

#container .column {
position: relative;
float: left;
}

#center {
padding: 0px 0px; /* CC padding */
width: 100%;
}

#left {
width: 200px; /* LC width */
padding: 0 0px 0 0; /* LC padding */
/*right: 220px; /* LC fullwidth + CC padding */
right: 200px; /* LC fullwidth + CC padding */
margin-left: -100%;

}

#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -100%;
}

#footer {
clear: both;
}

/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}

/*** Equal-height Columns ***/

#container {
overflow: hidden;
}

#container .column {
padding-bottom: 1001em; /* X + padding-bottom */
margin-bottom: -1000em; /* X */
}

/*** Footer Fix ***/

* html body {
overflow: hidden;
}

* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #FFF; /*** Same as body background ***/
}

/*** Just for Looks ***/

body {
margin: 0;
padding: 0;

}

#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;

}

#left {
/*background: #66F;*/
}

#center {
background: #DDD;
}

#right {
/*background: #F66;*/
}

#container .column {
/*padding-top: 1em;
text-align: justify;*/
}

How to fix it?

sankarSeptember 8th, 2009 at 3:30 am

i used above things but still modal popup is not comming center by default.any help please

SudiptaFebruary 16th, 2010 at 2:19 am

my popupextender is working in ie6,firefox,google chrome,opera but not working in ie7 or ie8

Leave a comment

Your comment