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?
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.
Sincerely,
Georgi Sashev
Developer Support Engineer
Infragistics, Inc.
http://ko.infragistics.com/support
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.