This is the generated code from the tab.
<div class="ig_Control igtab_THControl" id="EmployeeRequestTab" style="min-width: 985px; width: 985px; height: 437px; visibility: visible; overflow: hidden;" oBackColor="White" control="[object Object]" name="EmployeeRequestTab" CtlMain="layout">
<span class="ig_TabBar igtab_THHolder" id="x:378082248.0:mkr:head" _events="[object Object]" mkr="head">
...
So to make your tab match the company standard, I need to add some padding to the left of the span. Problem is that when I do that it then pokes out the side. The div with overflow set to hidden does not seem to cut it off as I was expecting.
Lets say Our tab background is "Green" . I add padding-left 10px;
Any suggestions?
Hi Mland,
In order to style our controls correctly you need to use their properties and to set the css classes to them. In this case I will recomend you to use the following approach
[code]
<head runat="server">
<title></title>
<style type="text/css">
.classOne
{
padding-left:40px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ig:WebTab ID="WebTab1" runat="server" Height="200px" Width="300px" TabItemCssClasses-CenterCssClass="classOne">
<Tabs>
<ig:ContentTabItem runat="server" Text="Tab 1" MarginLeading="10px" MarginTrailing="5px">
</ig:ContentTabItem>
<ig:ContentTabItem runat="server" Text="Tab 2">
</Tabs>
</ig:WebTab>
[/code/
I hope this helps. For any further questions do not hesitate to contact me
Sincerely,
Georgi Sashev
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support
I need to round the top right corner. Normally I place an image and overlay it. This does not seem to work. Any suggestions?
It looks great. thanks for your help it was really appreciated.
Hello Mland,
This was what I think off too. To set the width with 2 pixels less.
So after this work around does it look like you want it?
I hope this helps.
So I can get it to look close. The issue is still the same the tab bar is generated in such a way that the div does not cut it off. I need to have a border on each end so it pushed it out by the 2. I did a bad hack where I just set the width to 2 less but that is evil.
That rounds the content pane not the top of the tab. I want to round the top of the tab.
There are a bunch of classes under: TabItemCssClasses but none of those look like they are to round corners. This is where I focused my efforts to no avail.
You can style the corners for the tab with adding any class to the following tab properties:
ContentPane-CssClass
ContentPane-HolderCssClass
ContentPane-HolderInnerCssClass
Also you can switch to the properties of the webTab and to design the corners in the way you want. I am attaching a screenshot of this:
Looking forward to hear from you.