There seems to be a lot of issues on the ASP.NET Forums with “Theming” the AJAX Control Toolkit’s Tab Control. There are lots of requests for samples (one example), but there are limited resources out there. Looking at the Tabs sample page, you will find information on Theming, but it’s pretty basic. You will find the various styles that affect the tabs on the bottom of the sample page. Even with this, it leaves something out and people have problems. I believe the thing that throws people off is how the sample states “If your CssClass does not provide values for any of those then it falls back to the default value.”; the default value for the tabs are extremely basic. The style you most frequently see is the XP tab style (more on this later).
I feel you should begin by looking at the structure of the tab HTML to truly understand how it works. If you are curious about the other HTML structure, check out Firebug. The power of Firebug is truly amazing; this is a sample screenshot but doesn’t even come close to paying Firebug justice:
[If anyone from the Microsoft IE team is listening; PLEASE give us this power in IE7 or IE8, the Internet Explorer Developer Toolbar is ok, but it just feels crippled next to Firebug and "Firebug Lite" doesn't fill any of the real gap.]
Let’s take a closer look at the tab structure:
|
01 <span id=”…” class=”ajax__tab_active”> |
As you can see, a tab is constructed of nested <span> tags. The class ajax__tab_outer defines the right side of the tab, the class ajax__tab_inner defines the left side of the tab, and finally ajax__tab_tab defines the middle of the tab as this image shows:
Now that we understand the tab structure, let’s work on some styles. In this example, we’ll clone the tab styles of Internet Explorer 7 (IE7) under Windows XP. The easiest way to create new styles is to copy that of the ajax__tab_xp which is the default style that you typically see. Browsing the source of the Tab control (which you can download from Codeplex), navigate to the AjaxControlToolkit\Tabs folder and open up Tabs.css. You will find a section called xp theme; this is what we are copying. Looking at the CSS you’ll see that the effects for the tab are created using images and for the IE7 style, we will do the same. So in copying the XP style, we create the following images:
- tab-line.gif – Used to underline the header
- tab-right – The right side of the inactive tab
- tab-left – The left side (outer) of the inactive tab
- tab – The inner portion (tab) of the inactive tab
- tab-right-hover – The right side of the hover tab
- tab-left-hover – The left side (outer) of the hover tab
- tab-hover – The inner portion (tab) of the hover tab
- tab-right-active – The right side of the active tab
- tab-left-active – The left side (outer) of the active tab
- tab-active – The inner portion (tab) of the active tab
…and finally create the styles (I have separated the background declarations from the other styles just for simplicity of listing and discussions)
First the backgrounds; this is a carbon copy of the ajax__tab_xp with just our new images replacing the embedded ones.
|
/* IE theme – Backgrounds */ .visoft__tab_xpie7 .ajax__tab_header { .visoft__tab_xpie7 .ajax__tab_outer { .visoft__tab_xpie7 .ajax__tab_inner { .visoft__tab_xpie7 .ajax__tab_tab { .visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_outer { .visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_inner { .visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_tab { .visoft__tab_xpie7 .ajax__tab_active .ajax__tab_outer { .visoft__tab_xpie7 .ajax__tab_active .ajax__tab_inner { .visoft__tab_xpie7 .ajax__tab_active .ajax__tab_tab { |
Finally, the rest of the styles which we’ll change a bit from the ajax__tab_xp styles:
|
.visoft__tab_xpie7 .ajax__tab_header { .visoft__tab_xpie7 .ajax__tab_outer { .visoft__tab_xpie7 .ajax__tab_inner { .visoft__tab_xpie7 .ajax__tab_tab { .visoft__tab_xpie7 .ajax__tab_body { |
Most of the styles are arbitrary (and most are copies from the ajax__tab_xp styles), but the two import styles that effect the tab are the height and padding, underlined in the sample above. The height matches that of the tab images while the padding increases the width and centers the text vertically and horizontally. You could set different left and right paddings to change the text alignment, but in this example we have it centered.
The last thing we need to do is to add the custom CssClass to the Tab Container:
<ajaxcontroltoolkit:tabcontainer id=”tabContainer” runat=”server” height=”300″ cssclass=”visoft__tab_xpie7″>
Finally, everything in place; we get the following tab style:
The three styles are represented in the image: tab, active, and hover. Not a bad reproduction from the original. Obviously, we don’t have an image in the header in this example, but this can always be added using the <headertemplate> of the Tab Panel. You can also go a bit farther with the replication and add the thin bar that is below the tabs.
If you’d like, you can download the files for this sample: Full Solution | CSS and Images Only
93 Comments
[b] Very Very Thanks.
Just what i was looking……:)[/b]
Great job… well written code with nice comments….
Thanks a lo t Damien.
This helped a ton. Thanks!
@Mike J. -
That should work fine. As long as your images is as wide as the padding, there shouldn’t be a gap. My guess is that something else may be causing the issue.
-Damien
I’m trying to make the tab sides wider than the default XP style. The tab-right.gif is 4px and the tab-left.gif is 3px. When I change:
.property_name .ajax__tab_inner { padding-left:3px }
and make it 4px or more, the gap appears in the tab even when I make the tab-left.gif wider to match.
What do I need to do for a wider side? I need to make a angle shaped tab.
Thanks!
Very useful, thanks.
I was trying to use the defaults for the tab control, and found two problems/bugs – one is a white border round the active tab, and the other a gap or whitespace in the middle of the tabs (when modifying the tabs with your own CSS, similar to what you have done in this post).
This post provides an explanation & solution for both problems:
http://www.appetere.com/Blog/April_2009/Ajax_Toolkit_Tab_control_CSS___layout_problems.aspx
Great Job Save me big time……….
@atconway -
Preload the hover images in order to eliminate the flicker. For example, try using this approach: http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css/
-Damien
This works great, thank you. I only have 1 question about the setup. I now have the following (any url line for example) as instructed in my .css:
background:url(../Images/AJAX Tabs/tab-hover-right.gif) no-repeat right;
The problem is, when I hover over the tab there is a quick flicker on the screen. While looking in the footer of IE you can briefly see that the image is being downloaded (it is really quick), but the download still makes a quick flicker.
The default .css from the AJAX toolkit was as follows:
background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;
For whatever reason thier version does not flicker when hovering over the tabs.
Does anyone know of a way to prevent this flickering from downloading of the image?
Thank you,
Awesome :)
Pacman429 -
Not sure I understand your issue, but it looks like your problem is with your hover style. Try just something like:
.Control__tab_Application .ajax__tab_hover { color: #5D7239; }
-Damien
Thank you for a great explanation on styling the Tab Control.
I have run into a problem when attempting to change the color of the text when hovering over a tab. Everything works fine until you attempt to hover over the active table. The text changes and I want to leave the color alone. Could you please offer any suggestions?
/* XP IE7 theme – Backgrounds */
.Control__tab_Application .ajax__tab_outer { background:url(./../image/unselected_right.jpg) no-repeat right; }
.Control__tab_Application .ajax__tab_inner { background:url(./../image/unselected_left.jpg) no-repeat; }
.Control__tab_Application .ajax__tab_tab { background:url(./../image/unselected_middle.jpg) repeat-x; }
.Control__tab_Application .ajax__tab_active .ajax__tab_outer { background:url(./../image/selected_right.jpg) no-repeat right; }
.Control__tab_Application .ajax__tab_active .ajax__tab_inner { background:url(./../image/selected_left.jpg) no-repeat; }
.Control__tab_Application .ajax__tab_active .ajax__tab_tab { background:url(./../image/selected_middle.jpg) repeat-x; }
/* XP IE7 theme – Other Styles */
.Control__tab_Application .ajax__tab_header font-family:verdana,tahoma,helvetica; color: White; font-weight: bold; font-size:12px;}
.Control__tab_Application .ajax__tab_outer { height:21px; margin-right: 1px }
.Control__tab_Application .ajax__tab_inner { padding-left: 7px; }
.Control__tab_Application .ajax__tab_tab { padding:4px 20px;margin: 0; }
.Control__tab_Application .ajax__tab_hover { font-family:verdana,tahoma,helvetica; color: #5D7239; font-weight: bold; font-size:12px;}
.Control__tab_Application .ajax__tab_body { font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:3px;background-color:#ffffff; }
Thank you Damien, it worked like a bomb.
Asim.
Thanks a lot Damien for the prompt response, i will try it in a while and will get back to you i need any further help.
Thank You,
Asim.
Asim -
To reduce the spacing, just add a negative margin-right to ajax__tab_outer . For example:
.visoft__tab_xpie7 .ajax__tab_outer {
height:29px;
margin-right:-1px;
}
And obviously a positive right margin would space them out more.
If you are talking about the padding of the tab, then that is actually part of the image, so you would need to change the image sizes and then adjust the padding accordingly.
-Damien
Hi, Great Article, Helped me alot, Thankyou very much, i m just stucked at a point, how to reduce the gap or spacing between tabs, please help me out,
Asim.
DaveKan -
You can add HTML code in the headertext property, for example:
<ajaxtoolkit:tabpanel id="tab01" runat="server" [b]headertext="<b>Tab 1</b>"[/b]>
…
</ajaxtoolkit:tabpanel>
Hope this helps.
-Damien
I have an ASP bulleted list in each tab that I am filling with data from my DB, I would like to change the color of the header text on the tab if that bulleted list contains information (to draw the users attention to the tab). I can’t seem to effect the color in my code behind function that I use to bind the data to the bulleted list…is there a way to make this happen?
Hi
In my tab cotainer the border on the right hand side is not coming properly, i am using.css file as per your steps.Please advise me as soon as possible.
baski
Hi, have you tried the DebugBar http://www.debugbar.com/, I find it better than Firebug sometimes!
You could do that with float right, but you would need another container, so if it was like:
header div (existing) >> [b]tab holder (which you would float: right)[/b] >> header tab (existing). You could modify the source to do this if you wanted.
Don’t know if there is another way to do it since I don’t have much experience designing right to left interfaces.
-Damien
Thanks Damien
But i mean that Tab 1 | Tab 2 | Tab 3 placed in the right of the page instead of left.
I think its impossible :(
Babak -
I haven’t tested this, but something like this might work:
[b].visoft__tab_xpie7 .ajax__tab_header span { float: right; }[/b]. That will reverse the tabs and float them off to the right, so Tab 1 | Tab 2 | Tab 3 would turn into Tab 3 | Tab 2 | Tab 1.
-Damien
Thank you .. your code has solved my problem 80%.. great!
I tried to align tabs right to left,How can i do that?Is it possible?
Thank you guys; you really saved our day
But one thing i want to tell that when i am keeping those images in the image folder then those images doesn’t appear and when i keep thme outside then it works great…
Can you tell me what will be the URL format to write in the CSS file???
thanks
hi.
thanks for your solution but can you tell me how to remove the border line of the tab control?? i mean the side border and bottom border line??? i just wanted to tabs and unders the tab jus one horizontal line….
Is it possible to do????
The line that fills the top is formed by a background image (in this example, .visoft__tab_xpie7 .ajax__tab_header. The inactive tab background has it’s own bottom line to match that of the header, but the active tab simply is just a solid color on the bottom. This hides the header background, and makes it appear to be cleared since it overlays the header background.
I hope this helps.
-Damien
I have been working through the example with my own images. Everything is working good except that I don’t understand how to make the line under the active tab not appear. When I have my tab_line.gif in the ajax__tab_header it shows on the active tab and if I just use the top border of the ajax__tab_body it shows on the active tab.
Could you explain how you got it to not show the line under the tab on the active tab?
Damien,
Thank you for your quick response. I figured out the issue.
It had to do with exact pixel size on the child control. I had defined the properties on the child as well but I had to find the exact pixels size that worked for the child control.
Anyways, thank you for good explanation on the AJAX Tab control CSS classes. Great job. God bless you.
-Gary
Gary -
My initial guess (I haven’t tried out your code yet) is that a parent style is causing your issue. Make sure that you override the parent properties in the child. For example, if you have a height on the parent, but don’t have it set on the child, the child will use the parents since the inner css class names are the same. Try using Firebug or the IE Developer Toolbar to trace the problematic style.
Let me know if this helps.
-Damien
Hi Damien,
I am working with nested AJAX Tab controls. I am using background images for the outer tab control’s tabs. I need to increase the height of parent control’s tabs to match the background image dimensions but this is creating the problem for inner (child) AJAX tab control’s tabs dimensions. As you can see below in the style sheet below, I have defined the width and height in the inner tab control as well but it still picks up the width and height from the parent control’s style sheet. Any help on this would be greatly appreciated.
Thanks,
Gary
<ajaxToolkit:TabContainer ID="tcControlPanel" runat="server" ActiveTabIndex="0" Width="930px" CssClass="TabOuter" OnClientActiveTabChanged="templateActiveTabChanged">
<ajaxToolkit:TabPanel ID="tpnlLayoutDesigner" runat="server" Width="930px">
<HeaderTemplate>
<asp:Label ID="lblTS" runat="server" Text=" Template " CssClass="tabText"></asp:Label>
</HeaderTemplate>
<ContentTemplate>
<ajaxToolkit:TabContainer ID="tcLayoutDesigner" runat="server" ActiveTabIndex="0" Width="900px" CssClass="TabInner" Height="70px">
<ajaxToolkit:TabPanel ID="tpnlFont" runat="server" Width="900px">
<HeaderTemplate>
</HeaderTemplate>
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabPanel>
.TabOuter
{
display: block;
}
.TabOuter .ajax__tab_header
{
font-family: verdana,tahoma,helvetica;
font-size: 11px;
border-bottom-color: #98B5C3;
border-bottom-width: 1px;
border-bottom-style: solid;
height: 21px;
}
.TabOuter .ajax__tab_outer
{
height: 21px;
}
.TabOuter .ajax__tab_inner
{
}
.TabOuter .ajax__tab_tab
{
background-image: url(images/non_active_tab.gif);
background-repeat: no-repeat;
background-color: #E0EFF6;
border-top-color: White;
border-top-width: 1px;
border-top-style: solid;
color: #0F5B82;
padding-top: 2px;
padding-bottom: 4px;
padding-left :4px;
height: 26px;
width: 150px;
}
.TabOuter .ajax__tab_hover .ajax__tab_outer
{
}
.TabOuter .ajax__tab_hover .ajax__tab_inner
{
}
.TabOuter .ajax__tab_hover .ajax__tab_tab
{
}
.TabsOuter .ajax__tab_hover .ajax__tab_active .ajax__tab_tab
{
}
.TabOuter .ajax__tab_active .ajax__tab_outer
{
height: 21px;
}
.TabOuter .ajax__tab_active .ajax__tab_tab
{
background-image: url(images/active_tab.gif);
background-repeat: no-repeat;
background-color: White;
border-top-color: White;
border-top-width: 1px;
border-top-style: solid;
color: #0F5B82;
font-weight: bold;
padding-top: 0px;
height: 26px;
width: 150px;
}
.TabOuter .ajax__tab_body
{
font-family: verdana,tahoma,helvetica;
font-size: 10pt;
border: 1px solid #98B5C3;
border-top: 0;
padding-left: 2px;
padding-right: 2px;
padding-top: 0px;
background-color: #ffffff;
}
/*INNER (CHILD) TAB CONTROL STYLE*/
.TabInner
{
display: block;
top: 0px;
}
.TabInner .ajax__tab_header
{
font-family: verdana,tahoma,helvetica;
font-size: 11px;
border-bottom-color: #98B5C3;
border-bottom-width: 1px;
border-bottom-style: solid;
height: 21px;
}
.TabInner .ajax__tab_outer
{
height: 21px;
}
.TabInner .ajax__tab_inner
{
}
.TabInner .ajax__tab_tab
{
background-image: url(”);
background-color: #E0EFF6;
border-left-color: #98B5C3;
border-left-width: 1px;
border-left-style: solid;
border-right-color: #98B5C3;
border-right-width: 1px;
border-right-style: solid;
border-top-color: #98B5C3;
border-top-width: 1px;
border-top-style: solid;
color: #0F5B82;
padding-top: 2px;
padding-bottom: 4px;
height: 21px;
}
.TabInner .ajax__tab_hover .ajax__tab_outer
{
}
.TabInner .ajax__tab_hover .ajax__tab_inner
{
}
.TabInner .ajax__tab_hover .ajax__tab_tab
{
}
.TabInner .ajax__tab_active .ajax__tab_outer
{
height: 22px;
}
.TabInner .ajax__tab_active .ajax__tab_inner
{
}
.TabInner .ajax__tab_active .ajax__tab_tab
{
background-image: url(”);
background-color: White;
border-left-color: #98B5C3;
border-left-width: 1px;
border-left-style: solid;
border-right-color: #98B5C3;
border-right-width: 1px;
border-right-style: solid;
border-top-color: #98B5C3;
border-top-width: 1px;
border-top-style: solid;
color: #0F5B82;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
height: 21px;
}
.TabInner .ajax__tab_body
{
font-family: verdana,tahoma,helvetica;
font-size: 10pt;
border: 1px solid #98B5C3;
border-top: 0;
padding: 8px;
background-color: #ffffff;
}
What a useful article. It’s exactly what I’m searching for.
Thanks a lot.
Rualmar -
That’s one way to do it. Why not use a transparent GIF instead of a PNG? IE6 will be fine with a GIF.
-Damien
Hi Damien.
I just can’t fix the tabs structure. One solution I’ve came with is having all the tabs with images, but using a transparent png in the ones without button. The problem is that transparency doesn’t work nice on IE6.
Thanks a lot for your help.
Rualmar -
It looks like the padding (perhaps margin) and height is causing your problems. The styles I have in this example are to place the text in the center of the tab. To make everything line up, you should have the same tab height for the text ones as well as the image tabs. I would focus on working with padding and the height. Remember that the background images are what create the tab structure, so you will most likely need to modify the height of these as well.
Hope this helps.
-Damien
Hi Damien, and thank you for the fast response.
I posted a comment a while ago, but it got deleted….maybe for posting an imageshack url? I was trying to show you the state of my tabs, and something I discovered with firebug (by the way, thanks for pointing out that tool).
First of all, I’ve checked all you said and I think it’s all right. I’ve seen you mention things about the DOCTYPE on other post, but everything seems to be OK. And about the styles, actually there are only the ones that you have by default in your theme.
The thing I’ve discovered is that the height of the span that contains the tab changes between the tabs with an image on it (3px) and the ones without it (12px). I can’t change it manually, even with firebug or other real-time CSS editors.
Could this be the source of the error? Because that only happens when I put an image on the tab. If I remove the image from all the tabs, I can fix the display by adjusting paddings and margins.
Any idea about this? Thanks in advance.
P.S.: If there’s any way to post images I can show you the tabs and the firebug reports.
Sorry for the double comment, but the image was wrong, the titles were changed. This is the rigt one:
http://img387.imageshack.us/img387/9213/tabsizesso3.png
And here’s the tabs state rigt now:
http://img387.imageshack.us/img387/8813/tabszy6.png
(I deleted the "padding: 8px 40px;" property trying to fix the problem, with it active, the text goes on the middle of its tab and their width grow)
Hi Damien, and thank you for the answer.
I’ve been trying out all you said, but I haven’t found any solution yet. About the font size, I have the same settings on all the computers I’ve tried it and, for the CSS, it has set the 11px font-size that you set by default.
About the images, their height is 21 px, so it’s less than the height of the background image (29 px). I’ve used Firebug (thank you for pointing out such powerful tool) to check the style that applies to them and here they are:
.ajax__tab_default .ajax__tab_tab
{
cursor:pointer;
text-align:center;
}
.ajax__tab_default .ajax__tab_header
{
white-space:nowrap;
}
.ajax__tab_header
{
font-family:verdana,tahoma,helvetica;
font-size:11px;
}
element.style {
border-collapse:collapse;
}
It seems they are the default styles that you’re aplying with your theme.
I’ve also checked the styles aplying to all the tabs and the elements inside them and they’re exactly the same.
What I’ve found is that, inside the tabContainer_header div, the span elements which represent the tabs without images have a size of Nx12 while the size of the ones with the image on it is Nx3 (where N is the width depending on the text inside it). Check it out here: http://img378.imageshack.us/img378/1880/tabsizesxp3.png
I’ve tried modidying styles, but I can’t fix that. Any idea about it? Thanks again.
Rualmar -
Since you are having problems on different computers, it sounds like your problem may have to do with something like font-size. If one computer has the font set to Large and another Medium, it could cause some problems since the tabs are fixed heights. Do you have font-size set to a fixed size (e.g. font-size: 11px;)? In terms of your ImageButton, my guess is that your problem has to do with height of the tab vs the default height. You need to set all the tabs to be the same height has the ImageButton tabs. Also, you may need to modify your tab background to compensate for the new height.
Other things to try/check…
1. Make sure you are using a Standards Mode DOCTYPE: http://en.wikipedia.org/wiki/Quirks_mode
2. Use Firebug (http://getfirebug.com/) to test your styles out in Firefox. There is a chance that you have some conflicting style causing you issues.
Hope this helps
-Damien
Hi Damien and thanks for that wonderful work.
I’m trying your theme and I’m having some weird problems.
- In first place, when I open it with firefox, the tabs doesn’t reach the tabcontrol body, so there is a white line between them (between the tabs and the body). The weird thing is that it happens randomly depending on the computer where I’m viewing it (having the same screen setup, browser settings, etc…)
- Second: some of the tabs have an imagebutton on it, but when I put them, the ones that have the button stay higher than the ones which doesn’t have, being that last ones on the right position.
Well, there are some more problems but all derived from these.
I’ve tried changing paddings, margins, using tables and divs to make the header templates, etc… but I haven’t reached a solution. I can only see it well on IE7, but on IE6 and Firefox I keep having those problems.
Any advice? Thanks in advance.
VV -
I’m not sure what could be wrong based on the information that you provided. I would use Firebug (http://getfirebug.com/) to debug your styles in Firefox. Your DOCTYPE shouldn’t be a problem, it should be rendering in standards mode in both IE and Firefox.
-Damien
I am using tabcontainer with 3 tab panels with XHTML 1.0 transitional doctype. It works well within IE7, but in firefox it does not display the border for the first panel correctly. The border height is less than the content height. I am also using the CSS but not using styles for the tabs. What may be the problem?
Thanks.