Tab container & Tab panel

Hi

I am trying to customize look n feel of tab panel's Header Text -- by giving a hover effect or a different background image to tabs. I could not see any way of achieving it.

Where is the location of class ajax__tab_xp? If I create my own class, the separate tabs disappear.. How to apply or modify the stylesheet class??

Thanks in advance for your help.

Anyone guyz? AJAX experts? Please help.

I will greatly appreciate a line of working code for this.. Thanks in advance.

Hi,

Here is a code snippet demonstrate using custom style on tabContainer.

<style type="text/css">
.ajax__tab_xp2 .ajax__tab_header {
font-family:verdana,tahoma,helvetica;
font-size:21px;
background:
repeat-x
bottom;white-space:normal;
}
.ajax__tab_xp2 .ajax__tab_outer {
border-style: solid double;
padding-right:4px;
background:
no-repeat
right;
height:21px;
}
.ajax__tab_xp2 .ajax__tab_inner {
padding-left:3px;
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_tab {
height: 100px;
padding:4px;
margin:0;
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_outer {
background:
no-repeat
right;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_tab {
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_outer {
background:
no-repeat
right;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_inner {
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_tab {
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_container .ajax__tab_default {text-align:center; background-color:Blue;white-space:normal;}
.ajax__tab_xp2 .ajax__tab_body {text-align:center; background-color:Blue; font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px; border-style:none; border-color:Green; border-bottom-style:none; border-left:none; border-right:none; border-top:none; }
.ajax__tab_xp .ajax__tab_body {
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:8px;
background-color:#ffffff;
}
</style>

<ajaxToolkit:TabContainer CssClass="ajax__tab_xp2" ....................

This question is being asked soooo many times...

Maybe this'll help:

http://forums.asp.net/t/1163303.aspx

And maybe someone should put this in the FAQ (if it isn't already there)..

Thank you Raymond.. your post has solved my problem 95%.. great!

Quick question, on Hover I have:

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {
/* background:no-repeat; */
font-weight:bold;

due to this, all tabs move or drift little bit (due to font weight change) on Mouse Over.
How can I avoid this?

Thanks & I mark this as answer!

Thank you NNM, for the post link. I totally agree with other member -- TabPanel/Container controls are so "non-intuitive" .. if changing style on tab control must be done through css then why can't MSFT write a single line or provide a sample in their AJAX demos!! I spent freaking hours in figuring this out ...

Believe it .. I am gonna have questions when I start actual coding with Tab Controls! ..

Sam

sdekha76 :

Try changing thepadding value. There's no fixed answer to padding value, since I think it depends on the font size.

edit: the tab styling may seem non intuitive at first, but once you play around with it a bit, you'll be able to customize it completely, even changing the background images. I really love this toolkit control.

Tab Control and Background Image

Is it possible to apply a background image for the Tab control's body ?

By default , it is having white colour background.

Any pointers will be helpful

Thanks

Bagavathi

Yes it is possible, try to put the tab controls in a table and set the background image url to point to the image that you want to display as the background, then each tab will have a separate background image. Try this out.!!!

Enzoi!!

Tab headers of Tab Container within the Update Panel

I have a TabContainer inside of Update Panel. It seems that the background style of the tab header don't shows.

<asp:Button ID="Button1" runat="server" Text="View Tab" />

<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>

<table id="Table1" runat="server">
<tr>
<td>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
 <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Tab 1" runat="server">
 <ContentTemplate>
Text 1
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Tab 2" runat="server">
 <ContentTemplate>
Text 2
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

Is there any other ways to bring back the background style of the tab header.

Thanks in advance

Please help me on this...

You can add a CSS class to your TabContainer. The toolkit ships with the style ajax__tab_xp to ensure its loaded see below.

<Ajax:TabContainerID="TabContainer1"runat="server"CssClass="ajax__tab_xp">

If you still experince issues use fiddler www.fiddlertool.com to check that the XP style sheet is sent as a web resource.