Hi,
My Scenario is i need to display my control on the "center" of the page. So, i used the HTML table element and placed the weTab controls inside it.
The WebTab's DisplayMode is set to "Scrollable". So that if there are more tabs then user can scroll.
Problem:
The scrolling of webtab is not woking. This happens only if i place the WeTab control inside the table element.If i palce the control outside the table element then I am able to scroll through the tabs.
Can some one please help me out.
<table align="center" width="875px">
<tr>
<td>
<div>
<ig:WebTab ID="WebTab" runat="server" Width="100%" Height="800px" DisplayMode="Scrollable"><ScrollButtons StartSpeed="500" EndSpeed="2000" /><PostBackOptions EnableDynamicUpdatePanels="true" EnableAjax="true" EnableLoadOnDemand="true" EnableLoadOnDemandUrl="true" EnableLoadOnDemandViewState="true" />
<AjaxIndicator Enabled="True" Location="MiddleCenter" BlockArea="Control" ImageUrl="~/Images/ajax-loader.gif" BlockCssClass="ig_AjaxIndicatorBlock" FadeInEquationType="EaseOut" FadeOutEquationType="EaseOut" FadeInDuration="3000" FadeOutDuration="3000" />
<Tabs><ig:ContentTabItem Text="Welcome" AutoSize="True" MarginLeading="1px" MarginTrailing="1px"><Template><table width="100%" height="100%" align="center"><tr><td valign="middle"><h1 style="text-align: center; font-family: Verdana; font-size: medium; vertical-align: middle">Welcome</h1></td></tr></table></Template></ig:ContentTabItem></Tabs>
<ContentPane AutoSize="True"></ContentPane></ig:WebTab></div></td></tr></table>
Nevermind. This does look like it got fixed. I've got some kind of error with my custom CSS. If i remove my own custom CSS, it works correctly, so the problem is clearly on my end.
Also, the proposed work around doesn't work.
As of the latest build, 10.3.20103.2134, this still is not fixed. I'm having the exact same problem. If the webtab is inside a table, scrolling doesn't work. If it is moved outside the table, it does.
That will be fixed in coming hot fixes. For now you may fix that in your application by replacing the width attribute in one of the css classes by a custom value. Below is example:
<head runat="server"> <style type="text/css"> .tabInTableFix{width:1000%;} </style></head>
<table>...<ig:WebTab ID="WebTab" runat="server" DisplayMode="Scrollable" ...> <CssClasses TabsHolderInnerWithScrollCssClass="tabInTableFix" /> ...</ig:WebTab>...</table>
Thank you for report. I reproduced that issue and it will be investigated.
I will let you know about results.