Modal Popup Extender Repositionmode is not working correctly

Hello,

I have a modal popup that contains a form with a height that exceeds the screen size. When i try to scroll down the modal popup repositions itself so that i never can reach the bottom content. I have tried downloading the latest Ajax Control toolkit release (1.11119) and implemented the RepositionMode = "None" attribute but it still doesn't work. Anyone have any suggestions?

Thanks,

Tony

Hi Tcha143,

As far as I know, it is a known issue. We suggest that you should post it toCodePlex. We will mark it as "resolved" so our community members won't waste their time to reproduce your issues. Thanks for understanding.

Best regards,

Jonathan

Modal Popup OnClick (Server Side) Issues

I'm utilizing a modal popup to allow a user to enter a new record for a gridview on the screen. Once the modal popup is displayed (via clicking a link button), the user enters some values in some textboxes and the user clicks the save button. At this point the application executes the code in the code-behind for the button. However, if this is the first viewing of the screen (i.e. I just pressed play in visual studio), the values of the textboxes contained within the panel contain blank values (even though the user entered values).

The second strange thing that occurs, is if this is not the first viewing of this page and I click the link to display the modal popup, enter the text and click save, the OnClick (server side) fires twice.

Has anyone run across this issue? If so, how did you resolve it?

Thanks in advance,

Brian

Please try your scenario with the recently available61106 release of the Toolkit (and ASP.NET AJAX Beta 2). If the problem persists, then please reply with acomplete, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

If you are using the Official Beta 2 release - don't use it (As David recommended) - unless they updated the bits on the day they posted it as Beta 2 Release -its broke...- go to the source tab and download today's release...about 1/3 of the controls with the 'official Beta 2 ' release would exhibit that behavior (the accordian - would never accept user clicks, drag panel never dragged, always visible just remained visible in one spot, and the modal exhibited your issues... had something to do with types function or something...If you are using Beta 1 or Atlas - it will be more about how you are wrapping the modal - you should place it in its own update panel even if you are attaching it into every row. I personally have the modal as a single instance and I control the modal show and hide in codebehind... examples are in my blog entries...

Modal popup visibility and background...

My ModalPopup panel is being visible before its disappears..

It flicks on the screen int the HTML load...
How can I fix this?

And...What is the style of modalPopoupExtender demo in atlas control toolkit site?

How can I make one similiar?

thanx!Please see FAQ #1 (http://forums.asp.net/thread/1293293.aspx#1) and StyleSheet.css in the root of the SampleWebSite.
Hi...Thanx...
BUT...I got three problems...

First...modalBackground stylesheet doesn't work in Firefox..because opacity and filter properties...
and..
Second...modalBackground stylesheet doesn't work with Dropdownlist control..it remains with default style...

finally...my last problem is that style="visibility:false;" doesn't work...

I just want to make something similiar to Insert Code modal of this page...with all components behind disabled and with low opacity...and it is hide on pageload =D..
this can't be so difficult...I also would like to load my usercontrol inside the modalpopup panel...BUT...is very difficult work with updatepanel and modalpopup together...

here is my code:

"DivRegisterUnit" style="visibility:false;"> "LabelUnitID" runat="server" Text="ID:"> "TextBoxUnitID" runat="server"> "LabelUnitDescription" runat="server" Text="Descri??o:"> "TextBoxUnitDescription" runat="server"> "ButtonRegisterUnit" runat="server" Text="Salvar" />
 "MpeRegisterUnit" runat="server"> "modalBackground" OkControlID="ButtonRegisterUnit" PopupControlID="DivRegisterUnit" TargetControlID="LinkButtonRegisterUnit" />

<div id="DivRegisterUnit"> <asp:Label ID="LabelUnitID" runat="server" Text="ID:"></asp:Label> <asp:TextBox ID="TextBoxUnitID" runat="server"></asp:TextBox> <asp:Label ID="LabelUnitDescription" runat="server" Text="Descri??o:"></asp:Label> <asp:TextBox ID="TextBoxUnitDescription" runat="server"></asp:TextBox> <asp:Button ID="ButtonRegisterUnit" runat="server" Text="Salvar" /> </div> <cc1:modalpopupextender id="MpeRegisterUnit" runat="server"> <cc1:ModalPopupProperties BackgroundCssClass="modalBackground" OkControlID="ButtonRegisterUnit" PopupControlID="DivRegisterUnit" TargetControlID="LinkButtonRegisterUnit" /> </cc1:modalpopupextender>

Hi...
I resolved two of my three problems :P

First...I was wrong...
Third...I used "visible:none;"

the only one that I can't fix was the dropdownlist problem...

thanx..
If the issue is that the dropdown remains visible when the ModalPopup is displayed, the reason can be found in the FAQ. Our next release will have a workaround for this; you can get the code from CodePlex now if you want to try it out early.

Modal Popup, DetailsView and UpdatePanel combined.

Hi all, this is my first foray into Atlas (and ASP.net) and I have come stuck with the following problem:

I am developing a simple lookup screen that lists users names along with email addresses in a GridView. There is a DetailsView control that allows insertion of new users as required. The lookup is contained within an updatePanel so only this portion of the page is refreshed when items are added, deleted, or changed. This works fine until:

I put the DetailsView into an atlas ModalPopup and have an 'Add User...' button. At this point the whole page refreshes and I cannot for the life of me get it to work correctly.

I have tried everything I can think of, scoured the web and forums but still no luck. I can get two of the three items (UpdatePanel, DetailsView, ModalPopup) working at once but the addtion of the third causes it all to go horribly wrong.

Can anyone out there help me?

Try adding UseSubmitBehavior="false" to the button that's causing the refresh. If that doesn't help, please post a simple sample demonstrating the problem. Thanks!

Modal popup, calculated screen size and scrolling...

I have a modal popup that pops up over a web page that does not require scrolling to view the content. As soon as the modal popups up, scroll bars appear.

I looked at the source code for the modal, and it calculates the screen size to make the background fit correctly, but it some how figures in the size of the modal popup content into it's calculation. It then sets the background height and width according to that. The most annoying is if the modal is over 550px wide, it will put scroll bars on the bottom. If you scroll those, the page css doesn't cover the extra space and looks horrible.

I have played with the modal and parent containers' css for size and position, but I can't get rid of the scroll bars. I even set the body's overflow to hidden which really f's up the look.

What can I do for this?

I figured it out. Set the panel to absolute and set the top to 0px. Doesn't change the position actually, but tricks the calculation of the screen size.

ModalPopup & Screen Flicker

Just as with the other controls, when the page first loads you briefly see the controls before they are hidden. However, with the modal if you set the control's visibility to hidden, it will not display when it's poped up.

Is this a known bug? or someting else?

This behavior happens to me too...
My popup panel is declared as follow, the same as the sample included in the toolkit:

<asp:Panel ID="MoveItemDialogPanel" runat="server" CssClass="modalPopup" style="display:none;" >
...

Urhh ... it's not a bug in Atlas or the toolkit ... it's a problem with the style sheets / CSS that you used. Most, if not all, of the samples work properly as shipped. Hundreds of different posts in the forum over this particular issue.

I've run into the same problem with Collapsible, Hover and ModalPopup. What you have to be really careful of ... is ensuring that if you do copy & paste (which I did) that you ensure that you've got all of the CSS in place as well.

What Atlas (and other Ajax frameworks) are doing is taking advantage of the evolution of browsers and CSS. You get the "fast" response and neat effects in the browser(s) because the markup is already their in the DOM ... it's simply not visible and/or had its behaviors (event sinks) hooked up until necessary. This coupled with "smarter" postbacks (i.e don't post back every possible input field on the page, hidden viewstate, etc) ... result in less over-the-wire data movement ... less processing at the server and an overall "snappier" user experience.

All of this has been doable for years ... it's just really hard to hand-write all that markup and javascript ... and get all the edge cases correct.

modalpopup - screen in back isnt being disabled

Can someone tell me what is wrong with my code below. when modalpop screen comes up, the screen in the back isn't being disabled. Plz help

<asp:Table ID="TableAdd" runat="server" Width="568px">
<asp:TableRow ID="TableRow90" runat="server">
<asp:TableCell ID="TableCell96" Width="50px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCel97" Width="120px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCell98" Width="50px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCel200" Width="120px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCell91" Width="50px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCell93" Width="120px" runat="server"><asp:Button ID="Insertbutton" runat="server" Text="Insert Additional Detail Type" /></asp:TableCell>
<asp:TableCell ID="TableCell92" Width="50px" runat="server"></asp:TableCell>
</asp:TableRow>
</asp:Table>

<!--Modal Screen to Insert Allocation Detail records !-->

<asp:Panel ID="Panel1" runat="server" Style="display: none" BackColor=white>

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:DetailsView ID="DetailsView2" runat="server"
AutoGenerateRows="False"
datakeynames="tran_id,tran_fk"
DataSourceID="Allocation"
DefaultMode="Insert"
HeaderText="Add a New Detail Allocation Info" Font-Bold="True">
<Fields>

<asp:TemplateField HeaderText="Type:">
<ItemTemplate>
<asp:DropDownList id="AddType" DataSourceID="TypeSource" Runat="Server"
DataTextField="tran_desc" DataValueField="tran_pk" SelectedValue='<%# Bind("tran_pk") %>'/>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Amount:">
<ItemTemplate>
<asp:Label ID="amount" Text='<%# Eval("amount") %>' Runat="Server" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="amount" runat="server" Text='<%# Bind("amount") %>' ></asp:TextBox>
<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server"
TargetControlID="amount" FilterType="Custom, Numbers" ValidChars="." />
</EditItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Date:" ItemStyle-Width=125 >
<ItemTemplate>
<asp:Label ID="trandate" Text='<%# Eval("trandate") %>' Runat="Server" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="trandate" runat="server" Text='<%# Bind("trandate") %>' Width=75></asp:TextBox>
<asp:ImageButton ID="ImgBntCalc" runat="server" ImageUrl="~/images/Calendar_scheduleHS.png" CausesValidation="False" />
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender5" runat="server"
TargetControlID="trandate"
Mask="99/99/9999"
MessageValidatorTip="true"
CultureName="en-US"
OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError"
MaskType="Date"
DisplayMoney="Left"
AcceptNegative="Left"
ErrorTooltipEnabled="True" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" Format="MM/dd/yyyy" TargetControlID="trandate" PopupButtonID="ImgBntCalc" />
</EditItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
<EditItemTemplate>
<asp:Button ID="BtnInsert" CommandName="Insert" Text="Insert" Runat="Server"/>
</EditItemTemplate>
</asp:TemplateField>
</Fields>
<HeaderStyle Font-Bold="True" BackColor="Silver" HorizontalAlign="Center" />
</asp:DetailsView>
</ContentTemplate>

</asp:UpdatePanel>

<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="Close" />
</p>

</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="Insertbutton"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
OkControlID="OkButton"
DropShadow="true">
</ajaxToolkit:ModalPopupExtender>

this doesnt happen automatically...you need to manually disable the other stuff.

Are you able to point me in the right direction on how to do that? I'm looking at the sampleWebsite and the video and I have no idea, besides in the style, on where they gray out the background page

just as you said... in styles.

What I've done is wrap it all in a container that I set to Enabled=False when they click the button/link/etc that causes the Popup

I have anexample of making a modal UpdateProgress. You should be able to use similar styles for the BackgroundCssClass as I do in the#progressBackgroundFilterexample

For example:

.modalBackground{
background-color:#000;
filter:alpha(opacity=50);
opacity:0.5;
}

-Damien

thank you guys for your help. I'm allset