Tab Container Custom Style in Firefox...

Hi,

I am using a TabContainer with a custom CSS file. I have copied the original CSS file and have modified it a little. Here is the CSS I am using:

/* xp theme */

/* Our Additions */

.StpAjaxTab

{

margin-left:auto;margin-right:auto;

}

.StpAjaxTab.ajax__tab_header

{

font-family:verdana,tahoma,helvetica;font-size:11px;

/* Our Additions */

border-bottom:solid1px#000000;text-align:left;

}

.StpAjaxTab.ajax__tab_outer

{

padding-right:4px;height:21px;

}

.StpAjaxTab.ajax__tab_inner

{

padding-left:3px;

/* Our Additions */

border:solid1px#000000;

}

.StpAjaxTab.ajax__tab_tab

{

height:13px;

padding:4px;

margin:0;

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_outer

{

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_inner

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_tab

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_active.ajax__tab_outer

{

}

.StpAjaxTab.ajax__tab_active.ajax__tab_inner

{

/* Our Additions */

background-color:#DDDDDD;

border:solid1px#000000;

}

.StpAjaxTab.ajax__tab_active.ajax__tab_tab

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_body

{

font-family:verdana,tahoma,helvetica;

font-size:10pt;

border:1pxsolid#999999;

border-top:0;

padding:8px;

background-color:#ffffff;

/* Our Additions */

background-color:#DDDDDD;

border:solid1px#000000;border-top:none0px;

}

I am using the TabContainer with the CssClass like this

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<ajax:TabContainerID="TabContainer"runat="server"Width="750px"Height="200px"meta:resourcekey="TabContainer"CssClass="StpAjaxTab">

<ajax:TabPanelID="AlleTrefferTabPanel"runat="server">

<HeaderTemplate>

<asp:UpdateProgressID="UpdateProgress"runat="server">

<ProgressTemplate>

<asp:ImageID="ProgressImage"runat="server"ImageUrl="~/Images/progressIcon.gif"Width="16"Height="16"/>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:LabelID="AlleTrefferLabel"runat="server"Visible="false"Text="Alle Treffer"meta:resourcekey="AlleTrefferLabel"></asp:Label>

</HeaderTemplate>

<ContentTemplate>

Content, you may place a button to generate a partial postback...

</ContentTemplate>

</ajax:TabPanel>

</ajax:TabContainer>

 
</ContentTemplate>
</asp:UpdatePanel>

If you try this out, you will see, that it will see that it works perfectly on IE. But on firefox, when a partial postback is generated, the tab headers' positions are not as they have to be.

After a partial postback has been generated, the tabs are not moving back to their original position. So the question is simple. How can I get the TabContainer in firefox behave exact like in IE?

I tried to change the css styles, but it doesn't worked.

Thanks for help,

bye...

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx for a tab theming example.

-Damien

Tab container styles

Can we change tab containers look and feel by overriding its CSS ,

Yes of course :)

Look in the Tabs.css file in the folder where you've installed the AjaxControlToolkit.

These CSS classes can you override in your own CSS file (new is the name of the style I choose, then you specify the attribute CssClass="ajax__tab_new" to override the CSS style):

/* inactive tab */
.ajax__tab_new .ajax__tab_header
.ajax__tab_new .ajax__tab_outer
.ajax__tab_new .ajax__tab_inner
.ajax__tab_new .ajax__tab_tab
/* active tab */
.ajax__tab_new .ajax__tab_active .ajax__tab_outer
.ajax__tab_new .ajax__tab_active .ajax__tab_inner
.ajax__tab_new .ajax__tab_active .ajax__tab_tab
/* tab hover */
.ajax__tab_new .ajax__tab_hover .ajax__tab_outer
.ajax__tab_new .ajax__tab_hover .ajax__tab_inner
.ajax__tab_new .ajax__tab_hover .ajax__tab_tab
/* tab's body */
.ajax__tab_new .ajax__tab_body

Kind regards,

sbogus.

I tried that and I still get the default tabs everytime.

Here is my stylesheet:

.MyTabStyle .ajax__tab_header{font-family:verdana,tahoma,helvetica;font-size:3px;background:url(../images/tab-line.gif) repeat-x bottom;}
.MyTabStyle .ajax__tab_outer{padding-right:4px;background:url(../images/tab-active-right.gif) no-repeat right;height:21px;}
.MyTabStyle .ajax__tab_inner{padding-right:3px;background:url(../images/tab-active-left.gif) no-repeat;}
.MyTabStyle .ajax__tab_tab{height:13px;padding:4px;margin:0;background:url(../images/tab-active.gif) repeat-x;}

.MyTabStyle .ajax__tab_hover .ajax__tab_outer{background: url(../images/tab-active-right.gif) no-repeat left top;}
.MyTabStyle .ajax__tab_hover .ajax__tab_inner{background: url(../images/tab-active-left.gif) no-repeat left top;}
.MyTabStyle .ajax__tab_hover .ajax__tab_tab{background: url(../images/tab-active.gif) repeat-x botom;}

.MyTabStyle .ajax__tab_active .ajax__tab_outer{background: url(../images/tab-active-right.gif) no-repeat left top;}
.MyTabStyle .ajax__tab_active .ajax__tab_inner{background: url(../images/tab-active-left.gif) no-repeat left top;}
.MyTabStyle .ajax__tab_active .ajax__tab_tab{background: url(../images/tab-active.gif) repeat-x botom;}

.MyTabStyle .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

This is pretty much copied from the Tabs.css file just to see if everything worked and I still get the default tabs. What am I missing something? Now the tabs demo says that it can be done this way.

Yes you are right, you are on correct way. I had similar issue with customization and I found that I have issue with my development enviroment.

Issue was that I was running on Windows Vista with VS .NET 2005. If you have the same enviroment don't use debug from VS. Just deploy your application to IIS and try it from there. It worked on my machine.

ricco831:

I tried that and I still get the default tabs everytime.

Have a look at thisblog entry, it discusses "Theming" the tabs

-Damien

Tab control style

hi

i want to override the default style of tab control.i copied the Css file from this linkhttp://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx

to a css file and set the tab container's css file to the new class name but this added some code in aspx page

<

ajaxToolkit:TabContainerID="TabContainer1"runat="server"CssClass="ajax_def_tab"><ajaxToolkit:TabPanelID="general"HeaderText="General "runat="server"><system.web.ui.controlrunat="server">

<div__designer:dtid="1688854155231235"id="DivGeneral"><asp:Panelrunat="server"GroupingText="General"Font-Size="10pt"Font-Names="Verdana"Height="50px"ID="Panel1"__designer:dtid="1688854155231236"><table__designer:dtid="1688854155231237"cellpadding="0"cellspacing="2"border=0class="label"width=100%><tr__designer:dtid="1688854155231238"><td__designer:dtid="1688854155231239"nowrap>First Name:</td><td__designer:dtid="1688854155231240"><asp:TextBoxrunat="server"BorderWidth="1px"Width="184px"ID="TextBox1"__designer:dtid="1688854155231241"></asp:TextBox>

</

td><td__designer:dtid="1688854155231242"nowrap>Last Name:</td><td__designer:dtid="1688854155231243"><asp:TextBoxrunat="server"BorderWidth="1px"ID="TextBox2"__designer:dtid="1688854155231244"></asp:TextBox>

</

td><td__designer:dtid="1688854155231245"nowrap>Middle Name</td><td__designer:dtid="1688854155231246"><asp:TextBoxrunat="server"BorderWidth="1px"Width="112px"Height="16px"ID="TextBox3"__designer:dtid="1688854155231247"></asp:TextBox>

</

td>

any help??

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx

-Damien

Tab Properties

Hello,

How can I change the text type and color the AJAX tabs?

And how can I change the tab container outline color?

Can I do this using CSS or in some other way?

Thanks,

Miguel

Take a look at theTabs sample page theming section which discusses how to customize the Tabs.