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?
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.
Hello,
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.
Sincerely,Mike P.Developer Support EngineerInfragistics, Inc.www.infragistics.com
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?
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.
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.