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
Hi Andreas,
If content of splitter is located in a wrapper like DIV and application needs to stretch that wrapper to the size of splitterPane, then that wrapper should have (90...100)% width/height or it should use calculated px values and adjust them on resize and initialization events of WebSplitter.
The architecture of UpdatePanel is based on DIV, but for some unknown reason it does not expose on server any properties/options related to that DIV: no Width/Height/Style/Border/BackColor/etc.
I am not sure how you managed to set width/height of UpdatePanel. I tried to set width/height to 100% on client and it seemed to work and tab was stretched to the size of splitterPane. Below are my codes.
Note: instead of WebSplitter.Initialize, you may use any load/initialize event on client.
<script type="text/javascript">function WebSplitter1_Initialize(sender, eventArgs){ var up1 = $get('<%=UpdatePanel1.ClientID%>'); if (up1) up1.style.width = up1.style.height = '100%';}</script>
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="600px" Width="700px" Orientation="Horizontal"> <Panes> <ig:SplitterPane runat="server"> <Template> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <ig:WebTab ID="WebTab1" runat="server" Width="100%" Height="100%"> <Tabs> <ig:ContentTabItem runat="server" Text="Tab 1" ContentUrl="Temp2.aspx"> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Tab 2"> </ig:ContentTabItem> </Tabs> </ig:WebTab> </ContentTemplate> </asp:UpdatePanel> </Template> </ig:SplitterPane> <ig:SplitterPane runat="server"> </ig:SplitterPane> </Panes> <ClientEvents Initialize="WebSplitter1_Initialize" /></ig:WebSplitter>
Hello
I just converted all UltraWebTabs to WebTabs and am having difficulty with resizing the template that contains the content. In the WebTab ClientEvents I use the SelectedIndexChanged="WebTab1_Initialize".
function UltraWebTab1_InitializeTabs(oWebTab){ if (oWebTab.getSelectedIndex() == 1){ oWebTab.getSelectedTab().elemIframe.style.height= '450px'; }
I need to mimic this behaviour but I am stuck here:
function WebTab1_Initialize(oTab, oEvent) { var tabIndex = oEvent.get_tabIndex(); if (oEvent.get_tabIndex() == 1) { oTab.ContentPane.style.height= '450px'; }
any help would be appreciated thanks
Hello,
Thank you very much. This code does the job!