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.
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.
Thanks for the update.
Your suggestion does indeed work for the simple example.
When applied to a WebTab containing complex elements, as you suggested, many other rendering issues occur and content does indeed appear outside the WebTab.
We have a massive code base and modifying it to use the newer controls is proving to be a near impossible task. I'm now struggling to justify the continued use of the Infragistics controls.
Any other suggestions would be much appreciated.
Regards.
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.
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.
I am following up to see if the information provided has resolved 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.