Hello,
I'm having serious trouble to :
align tabs to left
set backcolor for tab when it is selected
set backcolor for tab when it is not selected
By the way , is there a guide to the ig_webtab.css file?
thanks in advance,
Claudio
Thank you for contacting us.
About your concerns:
- You can use TabLocation in order to set a position of the tabs (TabLocation="TopLeft")
- If you want to change any of our CSS classes my suggestion is to use Firebug or other web development tool in order to inspect the desired element.
For example below I have inspected which classes are applied to a Selected tab and a simple one.
Selected Tab:
<span class="igtab_Office2010BlueTHTab igtab_Office2010BlueTHTabSel" data-ig="x:WebTab1.1:mkr:ti0" mkr="ti0" style="width: 19.1261%;"> <span class="igtab_Office2010BlueTHTail igtab_Office2010BlueTHTailSel"> <span class="igtab_Office2010BlueTHCenter igtab_Office2010BlueTHCenterSel"> <span class="igtab_Office2010BlueTHText igtab_Office2010BlueTHTextSel">Tab 1</span> </span> </span></span>
Simple Tab:
<span class="igtab_Office2010BlueTHTail"> <span class="igtab_Office2010BlueTHCenter"> <span class="igtab_Office2010BlueTHText">Tab 2</span> </span></span>
I can also suggest you to use our AppStylist tool, with it you will be able to set custom style to any of our controls and also to observe which CSS classes are applied. Could you please try it.
Image:
hello zdravko,
I tried the tablocation property but it does not works. Tabs are still centered instead of left aligned
Here is code I'm using:
<ig:WebTab ID="WebTab1" runat="server" Height="100%" Width="100%" BorderColor="#86AF28" BorderStyle="Solid" BorderWidth="5px" Style="margin-bottom: 0px;" AutoPostBackFlags-TabMoved="On" Font-Bold="true" TabOrientation="Horizontal" VisibleHeader="true" TabLocation="TopLeft"><Tabs><ig:ContentTabItem runat="server" Key="idTab1" Text="Hoja de Trabajo" ></ig:ContentTabItem><ig:ContentTabItem runat="server" Key="idTab2" Text="Buscar" ></ig:ContentTabItem><ig:ContentTabItem runat="server" Key="idTab3" Text="Filtrar" ></ig:ContentTabItem></Tabs></ig:WebTab>
where can I find the AppStylist ? I'am using Visual Studio 2012
You can find AppStylist here : "C:\Program Files (x86)\Infragistics\201X.X\ASP.NET\AppStylist for ASP.NET\Infragistics4.Web.AppStylist.v14.1.exe"
About the TabLocation property please have a look at the following online sample:
http://www.infragistics.com/samples/aspnet/tab/property-explorer
Please let me know if I may be of further assistance.
Thanks for the try, but it didn't help
- I finally managed to align left the tabs. TabLocation do not works if you set text-align at <BODY> on your page, so what you need to do is to remove text-align from <Body> an then set the TabLocation on your WebTab
- I finally managed to set color, back color via css . Here is the code:
<style type="text/css"> .DefaultTabStyle { width: 50px !important; font-weight: bold; color: white; background-color:#594E44; border: 1px solid #999999; } .HoverTabStyle { color: black; background-color:lightgray; } .SelectedTabStyle { color: white; background-color:#86AF28; } .TextoTab {
text-align:left; font-size:medium; height: 100px !important; } </style>
<ig:WebTab ID="WebTab1" runat="server" Height="100%" Width="100%" BorderColor="#86AF28" BorderStyle="Solid" BorderWidth="5px" Style="margin-bottom: 0px;" AutoPostBackFlags-TabMoved="On" Font-Bold="true" TabOrientation="Horizontal" VisibleHeader="true" TabLocation="TopLeft">
<TabItemCssClasses CssClass="DefaultTabStyle" HoverCssClass="HoverTabStyle" TextCssClass="TextoTab" SelectedCssClass="SelectedTabStyle"/><Tabs>
<ig:ContentTabItem runat="server" Key="idTab1" Text="Hoja de Trabajo" ></ig:ContentTabItem><ig:ContentTabItem runat="server" Key="idTab2" Text="Buscar" ></ig:ContentTabItem><ig:ContentTabItem runat="server" Key="idTab3" Text="Filtrar" ></ig:ContentTabItem>
</Tabs>
</ig:WebTab>
regards,