How can I make the modal popup scroll its contents with the page?

asp.net ajaxcontroltoolkit modalpopupextender sizing
Middletone picture Middletone · Dec 12, 2009 · Viewed 30.4k times · Source

I've got a modal popup and when it loads contents that are taller than the browser height I am unable to scroll down to view the rest of the information. Instead the background can scroll but the popup won't.

Instead I'd like to have the popup stay put and when the user scrolls up or down it leave the popup in place and let them scroll to the bottom of the contents. If you make a super long post on Facebook the popup works correctly and I'd like to know how I can get this same effect with this control.

Answer

Public Helper picture Public Helper · Feb 5, 2010

In the css of your modal popup, set the width of the modalpop up, then set the overflow:auto. That will give you horizontal scrollbar. Example:

.ModalPopupPanel
{
  width:900px;
  overflow:auto;
}

So,when the content width exceed the 900px, the horizontal scrollbar will show up. The same is true for the vertical scrollbar where you need to set the height of the modalpop.

Related questions

Positioning AJAX ModalPopupExtender in the center of the screen problem

I have problem with positioning ModalPopupExtender in the center of the screen when it's PopupDragHandleControlID property is set (without this property it works fine ). ModalPopupExtender is not positioned in the center of the screen. I thinks what causes the problem …

Read More
Use ModalPopupExtender without having to set TargetControlID?

I'd like to use a modalpopupextender in my asp.net page to show a sub form. But it only has to show on specific conditions. Those conditions are determined in a piece of javascript code. So, most importantly, the modal …

Read More
asp.net ModalPopupExtender : need to show scroll bar when overflow

I display a gridview in a ModalPopupExtender. When the screen resolution is to small, the pop-up is to big to all be displayed on the page. I just want to add scroll bar to the pop-up when this happen. I …

Read More