As noted in this answer (http://forums.asp.net/post/3543262.aspx) you also need to lower the tab body position as it is covering part of your header (code from link above):
/* Fx. set the header height to 100px */
.ajax__tab .ajax__tab_tab {
height:100px; /* here */
margin:0;
padding:10px 4px;
}
/* Then increase the body's top attribute in order to expose the rest of the tab header */
.ajax__tab .ajax__tab_body
{
position:absolute;
top:100px; /* here */
width:205px;
}
Darrell Norton, MVP
Darrell Norton's Blog Please click "Mark as Answer" if this helped you.
For Google Chrome it looks okay just that the chapter letters have the p hanging in the body of the tab but the IE & FireFox have a major problem in displaying the tabs
Member
47 Points
59 Posts
TabContainer
Aug 06, 2013 02:25 AM|flash22231|LINK
Hey guys i have a problem....My TabContainer tabs' text doesn't show properly...
Reference : http://tinypic.com/r/j9lcfp/5
I tried changing the height of header and tabs it didn't work
.ajax__tab_xp .ajax__tab_header { height:21px; font-family: Arial, helvetica, sans-serif; font-size: 30px; color: #3a3a3a; display:table; } .ajax__tab_xp .ajax__tab_tab { padding: 4px 30px; width:80px; }All-Star
43204 Points
10243 Posts
MVP
Re: TabContainer
Aug 06, 2013 05:19 AM|DarrellNorton|LINK
As noted in this answer (http://forums.asp.net/post/3543262.aspx) you also need to lower the tab body position as it is covering part of your header (code from link above):
/* Fx. set the header height to 100px */ .ajax__tab .ajax__tab_tab { height:100px; /* here */ margin:0; padding:10px 4px; } /* Then increase the body's top attribute in order to expose the rest of the tab header */ .ajax__tab .ajax__tab_body { position:absolute; top:100px; /* here */ width:205px; }Darrell Norton's Blog
Please click "Mark as Answer" if this helped you.
Member
47 Points
59 Posts
Re: TabContainer
Aug 11, 2013 11:49 PM|flash22231|LINK
But sir, when i tried your codes
it show as per following
http://tinypic.com/r/28cg1tf/5
Erm i adjust til like that...but i am not sure how to adjust the tab's height
http://tinypic.com/r/10pzqbn/5
All-Star
48393 Points
12161 Posts
Re: TabContainer
Aug 13, 2013 12:34 AM|chetan.sarode|LINK
Refer this - http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx and http://www.asp.net/ajaxlibrary/act_TabContainer.ashx
Team Lead, Product Development
Approva Systems Pvt Ltd, Pune, India.
Member
250 Points
351 Posts
Re: TabContainer
Aug 13, 2013 12:38 AM|nandankesh|LINK
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" AutoPostBack="True">
<cc1:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>
Registration</HeaderTemplate>
<ContentTemplate>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>
Personal Information</HeaderTemplate>
<ContentTemplate></ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
All-Star
15648 Points
2151 Posts
Re: TabContainer
Aug 13, 2013 05:05 AM|Happy Chen - MSFT|LINK
hi flash22231 ,
From what I understand you want to adjust the tab's height with css style.you can try using this in the CSS as below:
.ajax__tab .ajax__tab_tab { height:30px; /*if you change it here*/ margin:0; padding:10px 4px; border: 1px solid ; border-bottom: 0px ; } .ajax__tab .ajax__tab_body { position:inherit ; top:30px; /*change it here also*/ border: 1px solid ; border-top: 0px ; }and this in the code behid...
Please read the reference below for more information:
http://forums.asp.net/t/1821308.aspx/2/10?How+to+Increase+height+of+the+header+in+ajax+tab+panel+programmatically
Member
47 Points
59 Posts
Re: TabContainer
Aug 14, 2013 11:21 PM|flash22231|LINK
Hi Happy Chen
I did what u suggested...it works fine...and i tried it on all browsers i have
For Google Chrome :
http://tinypic.com/r/2md4s8/5
For IE & FireFox :
http://tinypic.com/r/2iudbv6/5
For Google Chrome it looks okay just that the chapter letters have the p hanging in the body of the tab but the IE & FireFox have a major problem in displaying the tabs
All-Star
15648 Points
2151 Posts
Re: TabContainer
Aug 15, 2013 12:46 AM|Happy Chen - MSFT|LINK
Hi flash22231,
the major problem in displaying the tabs is that position is wrong.you can try changing position to "position:absolute ;"
.ajax__tab .ajax__tab_body { position:absolute ; top:30px; /*change it here also*/ border: 1px solid ; border-top: 0px ; }Member
443 Points
200 Posts
Re: TabContainer
Aug 15, 2013 02:06 AM|webcodeexpert|LINK
Read the below mentioned article and format as in this example
Ajax TabContainer example to create multiple tabs/panels in asp.net
http://www.webcodeexpert.com
Member
47 Points
59 Posts
Re: TabContainer
Aug 15, 2013 03:27 AM|flash22231|LINK
Hi Happy Chen
It still stays the same though after i changed the position to absolute
Member
47 Points
59 Posts
Re: TabContainer
Aug 15, 2013 03:35 AM|flash22231|LINK
Hi webcodeexpert
Wow thats great
It even has colour coding
Thanks a lot
None
0 Points
16 Posts
Re: TabContainer
Jan 23, 2014 11:21 AM|aspdotnetlearning|LINK
Hi Please Check this sites
http://aspdotnet-learning.blogspot.in/2013/09/explain-how-to-use-ajax-tab-container.html
http://aspdotnet-learning.blogspot.in/