question

JosAntonioGonzlezSeco-0613 avatar image
0 Votes"
JosAntonioGonzlezSeco-0613 asked JosAntonioGonzlezSeco-0613 commented

ModalPopupExtender doesn't center after partial postback

Hi,


I have a problem. My ModalPopupExtenders doesn't center correctly when you open them for the first time after a partial postack. If you open it for a second time after a partial postback it centers fine. And if you open it after a full postback it also centers fine. Can anyone help me? Here is a simple example that demonstrate the problem:

<%@ Page Title="Home Page" Language="VB" AutoEventWireup="true" CodeBehind="Test2.aspx.vb" Inherits="WebApplication1.Test2Page" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Test</title>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server" />

 <asp:Button ID="FullPostbackButton" Text="Cause Full Postback" runat="server" />
 <br /> <br />

 <asp:UpdatePanel ID="TestUpdatePanel" runat="server">
 <ContentTemplate>
     <asp:Button ID="PartialPostbackButton" Text="Cause Partial Postback" runat="server" />
     <br /> <br />

     <asp:Button ID="OpenButton" Text="Open Popup" runat="server" />    
     <ajaxToolkit:ModalPopupExtender ID="MyPopup" PopupControlID="TestPopup" CancelControlID="CloseButton" TargetControlID="OpenButton" runat="server" />

     <asp:Panel ID="TestPopup" BorderWidth="2" style="max-width:90%" runat="server">        
         <asp:Button ID="CloseButton" Text="Close Popup" runat="server" />
         <p> 
             Lorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecte
             Lorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecte
             Lorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecte
             Lorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecte
             Lorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, consecte
         </p>
     </asp:Panel>  
 </ContentTemplate></asp:UpdatePanel>   

</form>
</body>
</html>

You can check that:

1) If you click OpenButton just after accessing the page for the first time the popup displays correctly centered

2) If you click OpenButton just after pressing the FullPostbackButton the popup displays correctly centered

3) If you click OpenButton just after pressing the PartialPostbackButton the popup doesn't displays correctly centered. It displays displaced to the left.

4) If after clicking the CloseButton on a left-displaced popup you click again the OpenButton, the popup now displays correctly centered.

Can anyone help me in getting the popup correctly centered on the first click to OpenButton after clickng PartialPostbackButton ?

Regards.
José Antonio.


dotnet-aspnet-webforms
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

surferonwww avatar image
0 Votes"
surferonwww answered JosAntonioGonzlezSeco-0613 commented

I could reproduce your issue using your sample code as it is. Although I cannot offer the solution as I don't know what's happening inside, I suggest a workaround only to avoid the issue.

Move the ModalPopupExtender, Button ID="PartialPostbackButton" and Button ID="OpenButton" to outside the UpdatePanel as shown below:

     <asp:Button ID="FullPostbackButton" Text="Cause Full Postback" runat="server" />
     <br /> <br />
     <asp:Button ID="PartialPostbackButton" Text="Cause Partial Postback" runat="server" />
     <br /> <br />
     <asp:Button ID="OpenButton" Text="Open Popup" runat="server" />  
     <ajaxToolkit:ModalPopupExtender ID="MyPopup" runat="server" 
         CancelControlID="CloseButton" 
         PopupControlID="TestPopup" 
         TargetControlID="OpenButton">
     </ajaxToolkit:ModalPopupExtender>
          
     <asp:UpdatePanel ID="TestUpdatePanel" runat="server">
         <ContentTemplate>
             <asp:Panel ID="TestPopup" BorderWidth="2" style="max-width:90%" runat="server">        
                 <asp:Button ID="CloseButton" Text="Close Popup" runat="server" />
                 <p> 
                     Lorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecte
                     Lorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet,
                     consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecte
                     Lorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecte
                     Lorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet,
                     consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecte
                     Lorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecteLorem ipsum dolor sit amet, 
                     consecteLorem ipsum dolor sit amet, consecte
                 </p>
             </asp:Panel>  
         </ContentTemplate>
     </asp:UpdatePanel> 
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi surferonwww,


Thanks for the answer. Unfortunately moving the button outside the updatepanel won't help in my case. That would make it to not cause a partial postback, becoming like the FullPostbackButton. I detected this problem while developing a help feature in a master page with a button that displays the help information of the current child page. The child pages can have buttons inside update panels.


The workaround I'm currently using is manually adjusting the width of the popup after it appears using the following javascript code:

         function adjustWidth(sender) {
             var panel = document.getElementById(sender._popupControlID);
             panel.style.left = ((screen.width - panel.clientWidth) / 2) + "px";
         }

         Sys.Application.add_load(applicationLoadHandler);

         function applicationLoadHandler() {
             $find('MyPopupBehaviour').add_shown(adjustWidth);
         }

Declaring the modalpopupextender as:

<ajaxToolkit:ModalPopupExtender ID="MyPopup" runat="server"
BehaviorID="MyPopupBehaviour"
CancelControlID="CloseButton"
PopupControlID="TestPopup"
TargetControlID="OpenButton">
</ajaxToolkit:ModalPopupExtender>

0 Votes 0 ·
surferonwww avatar image surferonwww JosAntonioGonzlezSeco-0613 ·

That would make it to not cause a partial postback,

Sorry it is my oversight.

Although I tried setting the PartialPostbackButton to the AsyncPostBackTrigger it does not solve your issue. Only the solution was to set the width to fixed value such like "width: 500px" instead of "width: 90%" or max-width:90%."

Can your javascript solution adjust the position of popup to the center when the browser window is resized? If so, I guess it might be OK as workaround.

0 Votes 0 ·

Yes, the popup resizes well. Thanks in any case for your interest and time.

Regards.

0 Votes 0 ·
AlbertKallal-4360 avatar image
0 Votes"
AlbertKallal-4360 answered AlbertKallal-4360 commented

I think this is more a issue with css, then the AJ kit.

Max-width has often been a bit wonkey for me, and in general, you need to set BOTH width, and max-width.
(just max-width often given me trouble).

I find your example works rather nice if you dump max-width, and just use width:90%.

(so, try style="width:90%")


Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada

· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi AlbertKallal-4360,

Thanks for the answer. Unfortunately replacing the max-width with width would force a too high width in many case that would make the GUI feel a bit awkward. As I explain in my answer to surferonwww, the popup is part of a help-feature in a master page whose childs would include help info with many different widths, so with max-info I try to adjust the popup width to the needs of each child help info.

In my answer to surferonwww I explain a workaround I'm currently using by manually adjusting the width of the popup after it appears.

Regards.

0 Votes 0 ·
AlbertKallal-4360 avatar image AlbertKallal-4360 JosAntonioGonzlezSeco-0613 ·

Ok, you could try width 89%, and then max width of 90%.

As noted, quite sure css requires both settings to actually work.
(so, I would still test/try having both settings).

However, if your workaround is "ok", then that's ok too.

0 Votes 0 ·