Modal Popup Extender Scrolling Problem

I am using a modal popup extender to show part of my web page as a popup. When the web page is at the top the popup looks fine, it appears in the middle of the page and can be dragged around the page with the drag handle.

When the grid view on the page shows more records, obviously this means the user must scroll down the page to see other records. This is where the problem starts.

If the popup is visible and the page is scrolled down the popup over takes the page and disappears off the bottom of the page.

If the user has already scrolled down the page then when the popup is triggered it will already off the bottom of the page only to be seen again when scrolled up.

I can half solve this by changing the reposition mode to RepositionOnWindowResize, this has the effect of when the user is at the top of the page and scrolls down the popup stays in place, but if the user has scrolled to the bottom of the page and triggers the popup it doesn't appear at all.

Who is Participating?
David RobitailleConnect With a Mentor Analyst ProgrammerCommented:
The problem coul be the container of the panel modalpopup. try to put it outside of any panel/ table/ ect.
you could also try to remove the PopupDragHandleControlID. i read somewhere it could cause problems.
David RobitailleAnalyst ProgrammerCommented:
treanor99Author Commented:
Sorry I don't think I was clear enough.

The size of the popup is fine, its just that when the page is scrolled down the popup moves down the screen, not because it get's to big.

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

David RobitailleAnalyst ProgrammerCommented:
could i see your modal popup extender`s definition and `the CSS class you are applying on it.
 also try to set RepositionMode to RepositionOnWindowResizeAndScroll
treanor99Author Commented:
<cc1:ModalPopupExtender ID="MPEPopupPaper" runat="server" BackgroundCssClass="modalBackground"
                                    PopupControlID="panelPopPaperStatus" PopupDragHandleControlID="panelPopupPaperStatusDrag"
                                    TargetControlID="HLMessagePaper" DropShadow="True">

.modalPopup {

I've already tried all the different Reposition modes. One kind of works but only if the popup starts at the top of the page, not if it's scrolled down.
treanor99Author Commented:
Nice one davrob, it was the drag handle, as soon as I took that off it started scrolling fine no matter where on the page I was :o)

The handle was just a nice to have so problem solved... kinda.

Thank you!
David RobitailleAnalyst ProgrammerCommented:
ok, I made a quick search and i foud that.
So the page`s css is affecting the popup when PopupDragHandleControlID is set.
As far as I understand, it try to place the popup relative to where it`s placed on the page (because the user could move it). If ther is no DragHandle, it could center it on the page.
treanor99Author Commented:
It seems to be a common problem with AJAX and stuff interfering with it! Or maybe it's just me!

At least I know where to look if I ever actually need the drag option.

Thanks again mate!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.