Hi
I'm having issue with Web tab Height behavior. I have added 8-9 tabs, First ContentTabItem I'm loading as Under Template and rest of other ContentTabItem tabs thru ContentURL.
First tab is loading very fine but rest of other tabs height is not rendering properly. When I switch back and forth then tab height load normally. This I have to do for all the tabs except first tab.
Please let me know what is the problem here
Here is my Sample markup ;
<ig:WebTab ID="WebTab1" runat="server" Width="99.7%" EnableAjaxViewState="False" TabOrientation="Horizontal"
TabLocation="TopLeft" SelectedIndex="0" EnableOverlappingTabs="false" EnableActivation="false">
<PostBackOptions EnableLoadOnDemandUrl="True" EnableLoadOnDemand="true" EnableAjax="true" />
<AjaxIndicator Enabled="True" Location="MiddleCenter" />
<Tabs>
<ig:ContentTabItem runat="server" Text="Summary">
<Template>
<% span="">Some Html here --%>
</Template>
</ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="General Data" ContentUrl="../Checklists/IMP1001_GenData.aspx">ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="EC" TabSize="50px" ContentUrl="../Checklists/IMP1001_EC.aspx" >
ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="IC" TabSize="50px" ContentUrl="../Checklists/IMP1001_IC.aspx" >
<ig:ContentTabItem runat="server" Text="Equip" TabSize="50px" ContentUrl="../Checklists/IMP1001_EQ.aspx">ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="TPD" TabSize="50px" ContentUrl="../Checklists/IMP1001_TDP.aspx">ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="WOF" TabSize="50px" ContentUrl="../Checklists/IMP1001_WOF.aspx">ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="IO" TabSize="50px" ContentUrl="../Checklists/IMP1001_IO.aspx">ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="Other" TabSize="50px" ContentUrl="../Checklists/IMP1001_Oth.aspx">ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="Documents" >ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="P&MM" TabSize="50px">ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="BAP MOC Log" >ig:ContentTabItem>
Tabs>
ig:WebTab>
Hello,
Could you please provide more details about how the height is behaving? Generally the WebTab is going to resize to display the content that is on the page. Is this not the behavior that you want? How would you like the WebTab height to behave?
In addition, please provide the version of Infragistics for ASP.NET that you are using as this will help me looking in to this issue.
Thanks for you reply.
I want tab to resize its height with content height but currently its not happening. This webtab is part of master page and also I'm using this webtab control inside UpdatePanel.
One more thing I noticed AjaxIndicator only showing for few tabs not all of them.
I'm using IE 9 and Infragistics45.Web.v13.2.
<%@ Register Assembly="Infragistics45.Web.v13.2, Version=13.2.20132.1003, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" Namespace="Infragistics.Web.UI.LayoutControls" TagPrefix="ig" %>
Looking in to this further this appears to be the expected behavior of the WebTab when no height is specified, especially in the scenario where the content has dynamic sizing through JavaScript. When the tabs are allowed to autosize and you use a ContentUrl the tab tries to get the width and height of the iframe associated with the URL on load and tries to use that value to set the actual size of a WebTab. If the sizing can't be determined then the tab can't size correctly on the load. However once it has loaded a first time that information is now available before switch and the content can size correctly.
The way to work around this behavior is to set the heights of the tabs or content explicitly. There are two ways you can go about this. First, set a static height on the pages that you are loading in to the tab, for example setting the body tag of a ContentUrl page to have a height of 700px. The other option is to disable AutoSize on the main WebTab and set a specific height to the main page and all parent containers for the WebTab to specific values, which can be percentage base if you require. When I mention setting the height for all parent containers this really means if you are using a percentage based height you'll want to make sure that is set for not just the table but any TD, Table, Div, Form, Body, or Html elements that may be surrounding the WebTab control.
Thanks Jason for your reply..
I tried setting up height of body of the page but same result.. even I sets tab size explicitly, but it increases the size of tab not the height.
one more thing I notice about AjaxIndicator even though I enabled for the tabs, why I'm not getting this indicator in all tabs...
Please suggests.. its urgent...
Any update on this...
One more thing I noticed I'm binding Ultra Chart on page load event. Only on those page are not showing AjaxIndicator.
Please reply...its urgent...
I'm not really able to reproduce the behavior you are describing with the AJAX indicator. When I switch a tab that loads a page containing an UltraWebChart I see the AJAX indicator. I have attached the sample that I used to verify this. Please run this and let me know whether the AJAX indicator appears for you.
As for the height, I have also added in logic to the sample for tab content height. You are correct that TabSize manipulates the size of the tab header item. Instead you'll want to either set sizing on the body element of the page you are loading in to a tab or you want to make use of the WebTab's ContentPane.MinWidth, MaxWidth, MinHeight, and MaxHeight properties. In my sample I make use of setting body size and setting some ContentPane properties.
Problem was due to client events.
I removed ClientEvents SelectedIndexChanged and ClientEvents SelectedIndexChanging events.. and using server side code.
now my tab height rendering properly and also showing AjaxIndicator.
Thanks for your help..
Does the sample and information I provided allow you to display the tabs as you would like? Please let me know if I may be of any further help.