Hello,I just started to work with NetAdvantage tools for asp.net. And I'm not very exerpienced in asp.net development yet.My first problem I have now is setting the height of a webTab control to 100%. The webTab control is placed in an usercontrol, that in turn is placed in a webSplitter in the aspx page.With:<ig:WebTab ID="tabWorkspace" runat="server" Height="100%" Width="100%"> <Tabs> <ig:ContentTabItem runat="server" Text="Start" ContentUrl="Start/start.htm" ScrollBars="Hidden" Height="100%"> </ig:ContentTabItem> </Tabs></ig:WebTab>I got exact what I want. The webTab uses the complete vertical space of the page.But after I have added an UpdatePanel:<asp:UpdatePanel ID="UpdatePanel1" runat="server" Height="100%"><ContentTemplate><ig:WebTab ID="tabWorkspace" runat="server" Height="100%" Width="100%"> <Tabs> <ig:ContentTabItem runat="server" Text="Start" ContentUrl="Start/start.htm" ScrollBars="Hidden" Height="100%"> </ig:ContentTabItem> </Tabs></ig:WebTab></ContentTemplate></asp:UpdatePanel>the 100% height got lost. The webTab is set to a fixed height, from which I don't know where it comes from. The content is larger than the webTab space and a vertical scrollbar appears.All attempts to set the height back to 100% failed. I have tried to set the UpdatePanel height to 100% and also tried to set the height to 100% in code behind. Pagel Load and Page Prerender events for usercontrol and main page.Can anybody give me a hint what can be wrong?best regardsAndreas
HeaderHolderCssClass this property does not exist for Web Tab...I have the same requirement...I want to increase the Height of the tab
Hi,
1.Appearance of WebTab and its parts is defined by css classes (UltraWebTab had server-Style properties for that).
It means that if application needs to modify appearance should modify attributes of css classes. WebTab exposes absolutely all css classes used for its rendering through XxxCssClasses properties. Application also may modify those attributes in ig_webtab.css used by application and it will affect all WebTabs on page. You also may use a DOM inspector of any browser and check actual layout of tab labels/containers and which classes/attributes are used.
Below is example to (slightly) modify height of tabs.Note: since background images are used and they have limited sizes, if application needs large heights, then it should create its own background images for corresponding classes.
<head runat="server"><title></title><style>.tabCss { height: 27px; }.tabTailCss { height: 27px; }.tabHolderCss { height: 28px; }</style></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" /><ig:WebTab ID="WebTab1" runat="server" Width="300px" Height="200px"><Tabs><ig:ContentTabItem runat="server" Text="Tab 1"></ig:ContentTabItem><ig:ContentTabItem runat="server" Text="Tab 2"></ig:ContentTabItem></Tabs><CssClasses HeaderHolderCssClass="tabHolderCss" /><TabItemCssClasses CssClass="tabCss" TailCssClass="tabTailCss" /></ig:WebTab></form></body>
2. I do not know why that may happen. Please test a sample which I provided earlier and check if it has same problem.Note: dynamic content should be recreated in every single session. If your application loads content/tab conditionally, then application is responsible for any side effects. That is beyond support by WebTab.
Thanks for all your help. I have 2 more questions and then I'll be out of your hair:
1. How can you set the webtab header's height?
2. After I dynamically add a contentabitem to a webtab, all I see is the new tab along with the older one but nothing shows in the contenpane until I click on an actual tab. I have tried setting the focus property of the contenttabitem and playing with the hidden property but it didn't work. Thanks
The WebTab.ContentPane is holder of content panes of all tabs. It can not contain templates. I assume that you use ContentTabItem.UserControlUrl. That property was designed to set template which you ask for. If you asked about adding template/child controls at run-time, then you can use ContentTabItem by exactly same way as any container. Example:
this.WebTab1.Tabs[0].Controls.Add(new LiteralControl("My dynamic control"));
If you need to resize your control/template on client or on server regardless of size of WebTab and its resizing functionality, then the best I can suggest, is to wrap your control into a DIV or any other container, set the id attribute for that container, find on client reference to that container and modify its attributes.
Below is example for you:
aspx:
<script type="text/javascript">function WebTab1_Initialize(sender, eventArgs){ var tab1 = sender.getTabAt(0); var content1 = tab1.findChild('ContainerOfTab1'); if (content1) { content1.style.width = '100px'; content1.style.height = '100px'; content1.style.border = '2px solid red'; }}</script><ig:WebTab ID="WebTab1" runat="server" Width="300px" Height="200px"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1"></ig:ContentTabItem> </Tabs> <ClientEvents Initialize="WebTab1_Initialize" /></ig:WebTab>
aspx.cs:
protected void Page_Load(object sender, EventArgs e){ Panel panel = new Panel(); panel.ID = "ContainerOfTab1"; this.WebTab1.Tabs[0].Controls.Add(panel); this.Page.LoadTemplate("WebUserControl1.ascx").InstantiateIn(panel);}
Hello Again
I have another question, how can I place a user control into the contentpane? ContentPane is not a member of ContentTabItem.