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>
Thank you for report. I reproduced that issue and it will be investigated.
I will let you know about results.
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>
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.
Also, the proposed work around doesn't work.
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.