Modalpopup Extender issue

[semomaniz]

If you have used modalpopup often you are aware that if the content of the page is big enough you are able to scroll the page and still the modalpop remains at the center of the page or the x y coordinates provided. This leads to a problem that i am having using modal pop up .

if the content inside the panel that is being extended is big that it doesn't actually fit in the screen the pop up automatically chops the data off. is there a way to actually view the data that is being chopped off. If you scroll the page modalpopup automatically repositions and still does not allow to access the chopped data.

The only way around it that i have found is using a div with overflow to scroll and setting the panels size less than 400px( for example). This will display the popup and i still am able to access the data displayed.

I am wondering if there is a better way to handle this issue? Is there something that i am missing?

I have seen this done. if you visit the link below and click on the image a pop up opens. I noticed that the popup is set to fixed position and if we scroll the page popup also scrolls allowing us to access data that is being chopped at initial display.

http://www.nepalnews.com/main/index.php/photo-gallery/gallery/489.html

Can any one put some thoughts on this ?

[Frinavale]

I totally do not understand what the problem is.
A ModalPopup extender is used to block the page's content to ensure that the user does something before continuing to use the page content.

Are you sure you're using the right tool?
I'm not sure what you're trying to do....

-Frinny

[semomaniz]

yes it blocks the page but on the panel that is being extended we put a small user input form and add a button to update the data. I have set a form inside the panel that is being extended but i do have a image that has a bigger size so when it loads part of the form is being cut of because of size. I am not being able to access the part that is being cut off.
Here is a sample code

<asp:Panel ID="pan1" runat="server">
	 <p><asp:LinkButton ID="pandispatchclose" runat="server" Text="Close" /></p>
	<div>
		<table border="0" cellpadding="2" cellspacing="2" width="100%">
			<tr>
				<td style="width:35%">Inhouse Agent :</td>
				<td style="width:65%"><asp:Label ID="label1" runat="server" Text="" /></td>
			</tr>
			<tr>
				<td style="width:35%">Date / Time :</td>
				<td style="width:65%"><asp:Label ID="label2" runat="server" Text="" /></td>
			</tr>
			
			//I have more fields for data entry and also have an image here 
		</table>
		//This is a simple small form(popup) what if i add the following for simplictiy
		<p>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		</p>
		//after adding the breaks the panel pan1  will have a length bigger than the screen size, this is where 
		//the data gets cut off and i am not being able to access the data
	</div>
</asp:Panel>
<cc2:ModalPopupExtender id="mpe1" runat="server" TargetControlID="btnhid" 
	PopupControlID="pan1" BehaviorID="myMPEBID" Drag="True" 
	BackgroundCssClass="modalBackground" CancelControlID="pandispatchclose" />

[Frinavale]

Hmm I think that it has something to do with the styles you choose for the popup window and for the background (I refer to it as the "shield").

I haven't used the ModalPopup Extender before because I developed my own before it was developed.

Let me take a look at what the modal popup is using...sec.

-Frinny

[semomaniz]

Here is the CSS

.modalBackground {
	background-color: Gray;
	
	filter: alpha(opacity=50);
	opacity: 0.7;
}

.modalPopup {
	background-color:#ffffdd;
	border-width:3px;
	border-style:solid;
	border-color:black;
	padding:3px;
	
}

[Frinavale]

Yup, just as I suspected.

I took a look at the ModalPopupBehav iour.js file for the ModalPopupExten der. It sets the the panel and the "shield" to a position style of "fixed". What you really want is to set the style of the "panel" that you are popping up to a position style of "absolute".

Hmm..not sure what to suggest here.
You could modify the Ajax Toolkit to do what you want it to do.
Or you could create your own control...like I did...

Or if you don't want to do all that work you could just use the overflow:scroll style like you are doing currently :) (this is probably the easiest)

-Frinny

[semomaniz]

Setting the panels position as absolute doesn't help either. I will give a try to create my custom modalpopup extender

[semomaniz]

I am kind of lost never created custom extenders can you direct me to right direction have been scanning some articles found through google.

[Frinavale]

I haven't done an extender.
I typically do custom Ajax enabled server controls....but I don't think they are that different from each other.

Here's a walkthrough for Creating an Ajax extender.

You should be able to take what is in the Ajax Toolkit and modify it to your needs though (just with a simple change of a couple of lines).

-Frinny

[semomaniz]

I did get the problem fixed Thanks frinny .