TabContainer

Question

User-1035692366 posted

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;
}

Answer 1

User-837620913 posted

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
{
	;
	top:100px; /* here */
	width:205px;
}

Answer 2

User-1035692366 posted

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

Answer 3

User555306248 posted

Refer this - http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx and http://www.asp.net/ajaxlibrary/act_TabContainer.ashx

Answer 4

User958664279 posted

<%@ 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>

Answer 5

User-933407369 posted

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
{
         ;
        top:30px; /*change it here also*/
        border: 1px solid ;
        border-top: 0px ;
}

and this in the code behid...

tabContainerHojas.CssClass = "ajax__tab";

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

Answer 6

User-1035692366 posted

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

Answer 7

User-933407369 posted

Hi flash22231,

the major problem in displaying the tabs is that position is wrong.you can try changing position  to " ;"

.ajax__tab .ajax__tab_body
{
         ;
        top:30px; /*change it here also*/
        border: 1px solid ;
        border-top: 0px ;
}

 

Answer 8

User-1961616419 posted

Read the below mentioned article and format as in this example

Ajax TabContainer example to create multiple tabs/panels in asp.net

Answer 9

User-1035692366 posted

Hi Happy Chen

It still stays the same though after i changed the position to absolute

Answer 10

User-1035692366 posted

Hi webcodeexpert

Wow thats great 

It even has colour coding 

Thanks a lot

Answer 11

User2124956612 posted

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/