Fundamental problem with ModalPopupExtender

Last post 11-27-2008 6:34 AM by lvprasady. 10 replies.

Sort Posts:

  • Fundamental problem with ModalPopupExtender

    07-30-2006, 9:28 AM
    • Member
      380 point Member
    • speednet
    • Member since 06-24-2005, 3:35 AM
    • Posts 171

    I use a ModalPopupExtender within a User Control.  Under the first release of the AtlasControlToolkit everything was working perfectly.

    When I installed the lastest verion of the tookit, the modal popup started acting strange.  Instead of being centered on the page, it was shifted down and to the right.

    Obviously that's what happens when the code thinks the parent containiner in DOM in something other than the body.

    I used Beyond Compare to compare the old Modal Popup code to the new code, and found there were some JavaScript changes, so I first eliminated that as a problem by reverting to the old version's JS file.  It did not have an effect.

    There seems to be no changes at all in the .NET code for ModalPopup, so I am left to assume that there was some change made to AtlasControlExtender that is causing the problem.

    If I had access to the AtlasControlExtender code, I would recommend a change here, but I don't have access.  Is MS going to release that code at some point?

    I have created a complete test page (below) that demonstrates the problem in action.  If you include the new AtlasControlToolkit (6/26/2006), it will exhibit the problem.  If you swap in the old toolkit binaries, it will work as it should (covering and centering on the whole page).

    If a MS developer looks at this (I hope you do!), PLEASE do not suggest changing the order or placement of the form, DIV tags, etc.  I know full well that removing the DIV with the "position:relative" style will make everything work, but this code represents the basic framework elements of a complex web site that cannot be changed to suit a bug in the ModalPopup extender. 

    The Modal Popup code should work perfectly no matter where it is dropped in, and no matter where in the DOM it is inserted.  Since the first version worked fine, this can obviously be achieved.

    Thank you very much for looking into this, and I'd appreciate anything you could offer to fix it (including a bug fix, if possible).

    <%@ Page Language="VB" AutoEventWireup="false" EnableViewState="false" %>
    <%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="AtlasToolkit" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>Modal Test Page</title>
       <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
       <meta http-equiv="cache-control" content="no-cache" /><meta http-equiv="pragma" content="no-cache" />
       <meta http-equiv="expires" content="0" />
       <style type="text/css">
          .modalBackground {
             background-color:Gray;
             filter:alpha(opacity=70);
             opacity:0.7;
          }
       </style>
    </head>
    <body>
       <Atlas:ScriptManager ID="AtlasScriptManager" runat="server" />
       <table id="mainframework" border="0" cellspacing="10" cellpadding="0">
          <tr>
             <td id="mainframeworkleft">
                Left Col
             </td>
             <td id="mainframeworkbody">
                <form id="form1" runat="server">
                   <div style="position:relative">
                      <asp:Panel ID="PreviewPanel" style="display:none;" runat="server">
                         <div class="wrapper">
                            <strong>Popup Window!</strong>
                            <asp:HyperLink ID="PreviewCloseButton" Text="Close" runat="server" />
                         </div>
                      </asp:Panel>
                      <AtlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server">
                         <AtlasToolkit:ModalPopupProperties ID="mpPreview" TargetControlID="Preview" PopupControlID="PreviewPanel" BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="PreviewCloseButton" />
                      </AtlasToolkit:ModalPopupExtender>
                      <asp:LinkButton ID="Preview" Text="Preview" runat="server" />
                   </div>
                </form>               
             </td>
          </tr>
       </table>
    </body>
    </html>
    
     
    http://www.speednet.biz/
  • Re: Fundamental problem with ModalPopupExtender

    08-01-2006, 12:06 AM
    • Member
      380 point Member
    • speednet
    • Member since 06-24-2005, 3:35 AM
    • Posts 171

    I was hoping for some kind of response, if someone could at least let me know if it's a known issue, if there's a workaround, if it's the first time you've heard of it, whatever.  I think posting a full page of code that can be dropped into a test page makes verifying the bug just as easy as can be.

    I've asked the question in various topic threads before and never seem to get a response: is this a support forum, or is it at least monitored by the owners/developers of this software?

    I run a huge forum site myself, so I'm familar with the "netiquette" of acknowledging something, even though there is no immediate solution.  (Or maybe there is, for all I know.)  This is what could be called "radio silence."

    Can one of the developers please let me know about this, or if someone else has commentary or a solution, I'd appreciate anything you could offer.

    http://www.speednet.biz/
  • Re: Fundamental problem with ModalPopupExtender

    08-01-2006, 6:16 PM
    • Star
      8,710 point Star
    • David Anson
    • Member since 04-11-2006, 1:39 AM
    • Microsoft
    • Posts 1,842

    Sorry for the trouble! As you know from the workaround you mention, CSS has rules about nesting - specifically as it relates to the "position" style. Absolutely positioned elements nested within relatively positioned blocks have their positioning specifications applied according to the relatively positioned block instead of the outer frame. This is covered here and here. Early versions of ModalPopup would create the popup elements outside any containing page elements and thus the ModalPopup would always be relative to the frame. However, that behavior caused a number of problems, so we changed to the current scheme where the elements are created where the page author places them. In your particular scenario the aforementioned nesting is such that the ModalPopup doesn't cover the entire content area. :( There's an ongoing effort by forum folks to come up with an even more flexible ModalPopup that you can read about here and try for yourself. If those changes don't fix the problem for you, you might consider contributing to that effort for the benefit of everyone else.

    At the end of the day, it ends up being fairly difficult to come up with one single implementation that behaves exactly as everyone wants in each of the popular browsers. The community has been very helpful in identifying issues and working with us to get them fixed. Thanks for taking the time to bring this to our attention!


    http://blogs.msdn.com/delay

    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Fundamental problem with ModalPopupExtender

    08-01-2006, 9:34 PM
    • Member
      380 point Member
    • speednet
    • Member since 06-24-2005, 3:35 AM
    • Posts 171

    David,

    Thanks so much for the detailed response!

    I'm actually glad that I'm not going NUTS, and that there actually WAS a change that makes it behave differently.

    I will definitely check out the other post about the enhanced Modal Popup, thanks very much for pointing me over there. 

    I was also thinking that if MS would going to revisit the issue, maybe there could be an optional property that would create the container at the root level, or the developer could opt to keep as it is right now if that DOM code would create a problem for the particular web site.

    Again, many thanks for the reply.  I do hope to contribute in the future.

    http://www.speednet.biz/
  • Re: Fundamental problem with ModalPopupExtender

    10-29-2006, 6:22 PM
    • Contributor
      4,732 point Contributor
    • RTernier
    • Member since 06-05-2003, 1:40 AM
    • British Columbia, Canada
    • Posts 1,106

    It is sort of a pain I agree. I've just experienced it now.

    The usual way to center something (content pane etc.) in a page is to use auto-left: auto; auto-right:auto; width:800px; and that will center that in your page. So when you do the modal popup, it will start on the left-side of that centered element.

    The problem I have is that it doesn't just "fill" the centered part. It scrolls off the page to the right. It's as if it's putting the "panel" where the LinkButton is.

    Could it not be changed to render the ModalPopup where the containing Panel/Div is located? That way if you wanted to keep the panel outside of the main layout of the page, it would apply to the whole screen, otherwise it would apply to the bounds of where it was put.

     

    The Killer Ninja Coding Monkeys thank those that mark helpful posts as answers.

    My Site | My Examples | My Blog


  • Re: Fundamental problem with ModalPopupExtender

    01-10-2007, 7:18 AM
    • Member
      4 point Member
    • Haploid
    • Member since 01-10-2007, 11:57 AM
    • Posts 2

    Hey speednet,

    I had a very similar problem when I tried to use a ModalPopupExtender to display a panel that was nested within a panel that was also being displayed with a ModalPopupExtender. Managed to work around the problem with a fairly simple addition to the code.

     The problem, as you've already spotted, is that the panel is being displayed using an absolute position, but absolute positioning places it relative to the containing block it resides in (which in your case is the <div style="position:relative">). Fortunately for us, absolute positioning has a brother called fixed positioning. Fixed position uses the viewport as offset for the positioning of the panel, instead of the containing block.

     If you were to alter the javascript for the ModalPopupExtender to use position: fixed for the panel and the background, it works fine.

    An alternative way to deal with the problem, which does not require altering the Ajax Control Toolkit, is to place your panel inside an extra div that uses fixed positioning:

    <div style="position: relative">
        <div style="position: fixed; top: 0px; left: 0px;">
            <asp:Panel ID="Panel1" Style="display: none;" runat="server">
                <div class="wrapper">
                    <strong>Popup Window!</strong>
                    <asp:HyperLink ID="HyperLink1" Text="Close" runat="server" />
                </div>
            </asp:Panel>
        </div>
        <atlastoolkit:modalpopupextender id="ModalPopupExtender" runat="server">
            <AtlasToolkit:ModalPopupProperties ID="mpPreview" TargetControlID="Preview" PopupControlID="PreviewPanel" BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="PreviewCloseButton" />
        </atlastoolkit:modalpopupextender>
        <asp:LinkButton ID="LinkButton1" Text="Preview" runat="server" />
    </div>
    This solution still requires some testing. It solves the problem we ran into, but it might cause new problems in other places or under different circumstances. Regression's a ***, eh. :)
  • Re: Fundamental problem with ModalPopupExtender

    01-10-2007, 8:15 AM
    • Member
      380 point Member
    • speednet
    • Member since 06-24-2005, 3:35 AM
    • Posts 171

    Thanks for posting your tip about using position:fixed.  Any idea if that will work with IE 5.0+?  IE7 supports fixed positioning, but it was my understanding to IE 6.0 and lower do not.

    http://www.speednet.biz/
  • Re: Fundamental problem with ModalPopupExtender

    01-10-2007, 9:35 AM
    • Member
      4 point Member
    • Haploid
    • Member since 01-10-2007, 11:57 AM
    • Posts 2

    I knew this was too easy. :(

    You're right, Internet Explorer below 7.0 doesn't support fixed positions. On top of that, the solution I suggested screws up bigtime when the viewport has a scrollbar and you try to scroll down. Actually quite funny what it does then. ;) Part of the ModalPopupExtender is that it polls to reposition the elements involved, which doesn't take into account that that is not needed because the position is already fixed.

    I found a page that details a trick to get a fixed position in older versions of Internet Explorer. Maybe we can do something nice with this:
    http://www.howtocreate.co.uk/fixedPosition.html

    Gonna see what I can come up with. I'm afraid it will involve altering the code of ModalPopupExtender.
     

  • Re: Fundamental problem with ModalPopupExtender

    01-10-2007, 12:34 PM
    • Member
      380 point Member
    • speednet
    • Member since 06-24-2005, 3:35 AM
    • Posts 171

    Yes, I came to that conclusion a while back - that the need is there, and that the Toolkit team should address it.  It needs to be worked into the baseline code; it's not something that can be worked around very easily.  I get the feeling that the Modal box is something they do not look forward to working on, because they keep pushing off some very important requests by the community. 

    http://www.speednet.biz/
  • Re: Fundamental problem with ModalPopupExtender

    09-23-2007, 11:45 AM
    • Member
      22 point Member
    • mattdurrant
    • Member since 09-05-2006, 2:05 PM
    • Guildford
    • Posts 5

    If someone has / comes up with a workaround to this problem, please post it. At the moment I seem to have the choice between keeping my centered website design or using the modal popup control, which is a real shame. Has anyone tried the reworked modal popup control linked to above and can confirm it fixes this bug?

  • Re: Fundamental problem with ModalPopupExtender

    11-27-2008, 6:34 AM
    • Member
      113 point Member
    • lvprasady
    • Member since 04-19-2006, 3:19 AM
    • Hyderbad
    • Posts 27

    Hi Haploid,

    your above solution worked fine for me... thank you very much for help..

    Thanks and Regards,

    LVPrasad Y

     

     

     

Page 1 of 1 (11 items)