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://ko.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?
Hello Mland,
Can you send me an image to show me what exactly you need to achieve?
I will advise you further.
Thank you in advance.
So this is what our grid looked like before we upgraded.
I have stripped out images out of the new grid
#Grid .ig_TabBar_NoBackGround{
background:none;
I set a bunch of style sheets to this.
I need the color to be picked from another products style sheets so images will not work.
I need to redraw the selected tab so they slightly overlap the top of the grid, I also need to add a rounded corner on it. These are the two things causing me grief.
The rest I can get to look fairly close.
It looks great. thanks for your help it was really appreciated.
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.