We're using 2010 Vol 3.
If you assign the PopupDragHandleControlID property in a ModalPopupExtender, when the ModalPopupExtender is shown it is obscured by the WebTab, see this screenshot:
Here's the code:
<ig:WebTab ID="WebTab1" runat="server" Width="800px" Height="300px">
<Tabs>
<ig:ContentTabItem Text="<%$ Resources:Dictionary, sGeneral %>" Key="General">
<Template>
<asp:Button ID="B1" runat="server" Text="Show Modal" />
<asp:Panel ID="P1" runat="server" Width="200px" Height="400px" BackColor="Red" BorderColor="Black" BorderWidth="1px">
</asp:Panel>
<act:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="B1" PopupControlID="P1" PopupDragHandleControlID="P1" />
</Template>
</ig:ContentTabItem>
</Tabs>
</ig:WebTab>
Any ideas?
Hello,
I have been able to reproduce the behavior you are experiencing. I believe this may be the expected behavior for this control. I am going to look into this further and will update you in a few business days with my progress.
Sincerely,Mike P.Developer Support EngineerInfragistics, Inc.www.infragistics.com
I believe that this is the expected behavior of the WebTab, I recommend that you use the WebDialogWindow and set UseBodyAsParent to true.
http://help.infragistics.com/NetAdvantage/ASPNET/2010.3/CLR4.0/?page=Infragistics4.Web.v10.3~Infragistics.Web.UI.LayoutControls.WebDialogWindow~UseBodyAsParent.html
Please let me know if I may be of further assistance with this matter.
Unfortunately, using the WebDialogWindow is not an option for us. We have literally hundreds of instances of the ModalPopupExtender which have been behaving well within the old UltraWebTab control.
Surely, if this wasn't an issue with the UltraWebTab control then it shouldn't be with the WebTab control?
Regards.
Thank you for the update. This is the expected behavior because in order to prevent content rendering outside the tabs the WebTab uses overflow:auto/hidden and position:relative. To have the behavior you want to achieve you can remove these from the ig_webtab.css or override them for a specific WebTab.
The following is an example of this in code.
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> .noOverflow { position: static; overflow:visible; }</style> </head><body> <form id="form1" runat="server"> <div> </div> <ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager> <ig:WebTab ID="WebTab1" runat="server" Height="404px" Width="815px"> <tabs> <ig:ContentTabItem runat="server" Text="Tab 1" CssClass="noOverflow"> <Template> <asp:Button ID="B1" runat="server" Text="Show Modal" /> <asp:Panel ID="P1" runat="server" Width="200px" Height="400px" BackColor="Red" BorderColor="Black" BorderWidth="1px"> </asp:Panel> <act:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="B1" PopupControlID="P1" PopupDragHandleControlID="P1" /> </Template> </ig:ContentTabItem> </tabs> <ContentPane HolderCssClass="noOverflow"></ContentPane> </ig:WebTab> </form></body></html>
<style type="text/css"> .noOverflow { position: static; overflow:visible; }</style>
</head><body> <form id="form1" runat="server"> <div> </div>
<ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager>
<ig:WebTab ID="WebTab1" runat="server" Height="404px" Width="815px"> <tabs> <ig:ContentTabItem runat="server" Text="Tab 1" CssClass="noOverflow"> <Template> <asp:Button ID="B1" runat="server" Text="Show Modal" />
<asp:Panel ID="P1" runat="server" Width="200px" Height="400px" BackColor="Red" BorderColor="Black" BorderWidth="1px"> </asp:Panel>
<act:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="B1" PopupControlID="P1" PopupDragHandleControlID="P1" /> </Template> </ig:ContentTabItem> </tabs> <ContentPane HolderCssClass="noOverflow"></ContentPane> </ig:WebTab> </form></body></html>
Please note that this isn’t supported as it may cause rendering issues and content may appear outside the WebTab.
Please let me know if you have any questions concerning this matter.
Your best options are to either re-parent the ModalPopupExtender outside of the tab or to use the WebDiaglogWindow with the property UseBodyAsParent set to true.
Unfortunately no, this does not resolve the issue. Re-parenting the modal popup extender outside of the tab is not possible, because in most cases the extenders are contained within web controls and user controls that are inside the tabs.
I am following up to see if the information provided has resolved this matter.
I have heard back from development they do not have any further ideas on how you can achieve this. It seems the best idea is to re-parent the ModalPopupExtender to a panel that is outside the WebTab.
Thank you for your patience. An option to consider is to re-parent the ModalPopupExtender to a panel that is outside the WebTab so the ModalPopupExtender can appear how you wish. I have contacted development to discuss possible alternate suggestions for this issue. I will give you a progress update in a few business days.