ModalPopupExtender doesn't center after partial postback

José Antonio González Seco 1 Reputation point
2022-05-27T14:29:42.037+00:00

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.

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,221 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. SurferOnWww 1,796 Reputation points
    2022-05-28T02:32:45.313+00:00

    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> 
    

  2. Albert Kallal 4,566 Reputation points
    2022-05-28T03:17:36.533+00:00

    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