ISSUE :
 
Profile photo
Submitted by Misuk Wang
on June 1st, 2011 at 22:05:36 EST

Add scrollbar in ASP.NET AJAX Modal popup extender

Hi,
I am using ASP.NET AJAX modal popup extender. My modal popup is a form and my form is getting bigger and bigger because of business requirement. Now I am at the point when I can not fit everything into modal popup and I need scroll bar to my modal popup. Is there any way to fix the size of modal popup and scrollbar to it?

Thanks in advance.


Profile photo
Replied by SBajra
on June 1st, 2011 at 22:58:22 EST
ASP.NET AJAX Modal popup extender is just a mechanism to display .NET control (PopupControlID) as modal popup. For you to have scroll bar, you need to do something on your own.
I would suggest, you wrap your entire content of modal popup into <DIV> tag and apply style to <div> tag to create scrollbar and fix height/width. Key is using CSS to display scrollbar in <div> area.

This style will create fix height/width of <div> tag with scroll bar:
style="overflow:scroll; height:200px; width:200px;"


For example:
<div id="myModalPopup" runat="server" style="overflow:scroll; height:200px; width:200px;">
This is content inside modal popup.<br />
This is content inside modal popup.<br />
This is content inside modal popup.<br />
This is content inside modal popup.<br />
This is content inside modal popup.<br />
This is content inside modal popup.<br />
This is content inside modal popup.<br />
</div>

<asp:LinkButton ID="lnkButton" runat="server" Text="Launch popup" />

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
TargetControlID="LinkButton1"
PopupControlID="myModalPopup"
BackgroundCssClass="modalBackground"
/>
Accepted Answer
Accepted
 Answer

Profile photo
Replied by Misuk Wang
on June 2nd, 2011 at 17:55:14 EST
its that simple???? thanks...

Profile photo
Replied by Pooja Jain
on September 4th, 2014 at 02:59:31 EST
Nice Solution...Thanks!