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 Container Header tabs NOT on multiple rows

This is driving me crazy. I have a webpage that has a table on it. Inside the table I have a TabContainer. I have 13 tab headers I need for the one TabContainer. I populate the tab headers by a call to the database then doing a For Loop to enter all the headers. The problem is that when I run the app the tab headers are all on one row. How do I get the Tab Headers to split up into two rows?

Thanks in advanced.

mutlyp

Hi mutlyp,

As far as I know, there is no build-in support for this feature currently. You can votehere.

Hi Raymond

I actually found the answer but it took a lot of digging on the net. It's from Nazar Rizvi's blog

http://www.narizvi.com/blog/post/Two-rows-of-tab-headers-in-TabContainer-in-Ajax-Control-Toolkit.aspx

You have to go into the Tab.css and change the ".ajax__tab_default.ajax__tab_header {}" line. Then the Tab headers will wrap.

Funny how Nazar knew this and you a Microsoft rep didn't. Maybe you guys should hire Nazar.

Mutlyp,

Thanks for that link...

Regards

Karen

Thanks for sharing, it's so helpful.

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.

tab panel header text not changing programaticlly??

Hi All, I am using AJAX tabcontainer in my one of the web application. This application needs to be support english as well as japanese language. I had tried to change tabpanel1 text at run time by resource file(.resx file) and using Tabcontainer.Tabs[0].HeaderText property. But still tabpanel1 is coming on webpage. If i make the changes at design time, it is working fine. Please let me know if anyone has idea over same. Thanks In Advance Arnold

Can you post your code?

------------------
When you ask a question, remember to click "mark as answered" when you get a reply which answers your question.

Hi,Pls find code for changing the tabpanel text at run time: TabContainer1.Tabs[0].HeaderText = Resources.Resource.tabpanel1; TabContainer1.Tabs[1].HeaderText = Resources.Resource.tabpanel2;Please let me know what I am doing wrong?Thanks Arnold.
Any idea?

In which event do you use the code you provided?

In page_load function.

Are you creating any of the objects dinamically?

No, I have created same at design time.Thanks & Regards,Arnold

Oh, yes. One more question... What version of Visual Studio are you using?

What version of the toolkit are you using?

Try just setting your header to a fixed string to eliminate the complexity, e.g. TabConainer.Tabs[0].HeaderText = "Testing" or TabPanel1.HeaderText = "Testing";

You also should be able to do something like HeaderText="<%$Resources:myResources, Welcome %>" in the ASPX. Seehttp://www.codeproject.com/useritems/localization.asp for more information.

-Damien

Hi Guys,

I am using ASP.NET 2.0 AJAX Extensions toolkit and I had already tried both ways few days back, but this was not working, that's why I have droped a forum here :-)

Please let me know whether this is a bug, or how can i fix this?

Thanks & Regards,

Arnold.

When you set a static string (e.g. TabContainer.Tabs[0].HeaderText = "Testing" or TabPanel1.HeaderText = "Testing";), do you still have the issue?

Assuming you do, it sounds to me like something in your code is overwriting your dynamic assignment. This is not a bug with the Toolkit as I have done this with version 10920.

By the way, you are confusing two different technologies... "ASP.NET 2.0 AJAX Extensions toolkit" isn't a version of the Toolkit. TheASP.NET AJAX 1.0 Extensions provide you with the UpdatePanel, ScriptManager, etc. while theAJAX Control Toolkit gives you all the extra controls like the Tabs, Accodion, etc. When I asked what version of the Toolkit you were using I was refering to the build number.

I suggest you try the 10920 build and see if you still are having the issue:http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941. If you are, all signs point to a bug in your code. In that case, step through your program putting a watch on the TabPanel1.HeaderText seeing where it ends up being changed.

-Damien

Hi,I apologize for giving wrong information. Actually I am using ASP.NET 2.0 AJAX Extension and AJAX toolkit version 1.0.10920.0 both.And even I had tried in all the ways:TabContainer1.Tabs[0].HeaderText = "sample app";TabContainer1.Tabs[0].HeaderText = Resources.Resource.tabpanel1;in aspx file,">But nothing is working.In watch window, right value is displaying but on GUI, value is same as the design time value.Any efforts regarding same will be appreciated as this minor issue is taking so much of time.Thanks & Regards,Arnold

Ok, with 10920, I know for a fact it works. There is a problem somewhere in your code, something must be overwriting your tab's header. Do a search for "HeaderText" in your app to see if in fact it is being set somewhere else.

-Damien

Hi Damien,Thanks for reply. Issue has been solved finally.Issue was with headertemplate. headertemplate in aspx. was overwriting the information.Thanks & Regards,Arnold

Tab panels header text cut off half way vertically

I have added on Tab Container which contain three panels. When I run the page, the header text of panel cuts of vertically, looks like a white bar on top of text. Any help will be highly appreciated.

Following is my code:

<div>
<cc1:TabContainer ID="TabContainer1" runat="server">
<cc1:TabPanel ID="pnlStoryList" runat="server" HeaderText="Story List">
<HeaderTemplate>
Story List
</HeaderTemplate>
<ContentTemplate>
<table cellspacing="0" cellpadding="0" width="97%" align="center" border="0">
<tr class="ListTitle">
<td>
</td>
<td>
<b>Story Title</b>
</td>
<td colspan="3" align="center">
<b>Actions</b>
</td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="pnlOtherStory" runat="server">
<HeaderTemplate>
Other Stories
</HeaderTemplate>
<ContentTemplate>
<table cellspacing="0" cellpadding="0" width="97%" align="center" border="0">
<tr class="ListTitle">
<td width="80%">
<b>Title</b></td>
<td width="20%" colspan="3" align="center">
<b>Actions</b></td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="pnlSharedStory" runat="server">
<HeaderTemplate>
Shared Stories
</HeaderTemplate>
<ContentTemplate>
<table cellspacing="0" cellpadding="0" width="97%" align="center" border="0">
<tr class="ListTitle">
<td width="85%">
<b>Title</b></td>
<td colspan="2" width="15%">
<b>Actions</b></td>
</tr>
</table>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>

Hu Bdimtiaz,

Please make sure your have use the right DOCTYPE. Here is the write example.

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If it is not the write direction, please feel free to let me know with a repro.

Best regards,

Jonathan

<cc1:TabPanel ID="pnlStoryList" runat="server" HeaderText="Story List">
<HeaderTemplate>
Story List
</HeaderTemplate>

You don't need a headertemplate when you use HeaderText.

Try removing either the headertemplate or the HeaderText property.

edit: I bet your symptom is causes by the css in your headertemplate that does not come from the default tabs css, but from the page, and therefore becomes too big.

With HeaderText the default css will be used and it should fit nicely.

Hi NNM,

I have tested it. The result is cotent inside <HeaderTemplate> will be shown as the HeaderText.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"><ajaxToolkit:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"> <HeaderTemplate>12123</HeaderTemplate> <ContentTemplate>13123</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </form></body></html>

You can test it . It works pretty well. Now , you can remove the DocType and have another test. You will find the real exact root cause.

Best regards,

Jonathan

Tested... True...

And my above post about css in headertemplate is wrong.

TabContainer in Accordion/CollapseExtender/UpdatePanel

I have a TabContainer within an accordion pane, which is inside an accordion (obviously), which is inside a (content) panel. I have a header panel, and the content and header panel are tied together using the CollapsePanelExtender. The idea is that the accordion will the hidden/shown when the user clicks on the header panel - as one would expect, as it's done with the CollapsePanelExtender. The problem is that the TabContainer does not "roll up" when the CollapsePanel is set to shrink. I have also added javascript code to hide the content panel, and set the content panel height to 0, but the TabContainer still shows up. The other accordion panes and all the other controls are hidden, only the TabContainer stays.

Has anyone else come across something like this? I am using AjaxControlToolkit v.1.0.10920.0.

Thanks,

Chris P

Hi,

I have tested it with the following code:

<%@. Page Language="C#" %>

<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="Server" />
<div class="demoarea">
<div class="demoheading">
CollapsiblePanel Demonstration</div>
<asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px">
<div style="padding: 5px; cursor: pointer; vertical-align: middle;">
<div style="float: left;">
What is ASP.NET AJAX?</div>
<div style="float: left; margin-left: 20px;">
<asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
</div>
</div>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0">
<ajaxToolkit:Accordion ID="Accordion1" runat="server">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Content>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<ContentTemplate>
DYTGDFH
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</asp:Panel>
</div>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="Panel1"
ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="True" TextLabelID="Label1"
CollapsedSize="0" ExpandedSize="300" AutoCollapse="False" AutoExpand="False"
ScrollContents="True" CollapsedText="Show Details..." ExpandedText="Hide Details"
ExpandDirection="Vertical" />
</div>
</form>
</body>
</html>

Works fine,no such problem. But I am using AjaxControlToolkit v.1.0.10301.0.

You can update to AjaxControlToolkit v.1.0.10301.0.

Best Regards,