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.
Thank you very much!
It saved lot of my time.
@Satyendra
You are welcome
. This gave me quite a headache too
[...] 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 [...]
Hey.. thanks buddy.
I am facing the problem for a long time period. Finally your blog save my day.
wow…..
@Sam
Glad it helped
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())
What does it mean to Response.Write and Flush your DOCTYPE tag first?
@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.
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.
@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.
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.
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.
Thanks for the solution. It works fine for me.
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.
@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.
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.
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
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?
Thanks a lot, it works perfect now…
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’.
Hats off!. You saved my day. Uhm…I was clueless…….
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?
i used above things but still modal popup is not comming center by default.any help please
my popupextender is working in ie6,firefox,google chrome,opera but not working in ie7 or ie8