locked
TabContainer RRS feed

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

    Tuesday, August 6, 2013 2:25 AM

Answers

All replies

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



    Tuesday, August 6, 2013 5:19 AM
  • 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

    Sunday, August 11, 2013 11:49 PM
  • 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>

    Tuesday, August 13, 2013 12:38 AM
  • 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

    Tuesday, August 13, 2013 5:05 AM
  • 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

    Wednesday, August 14, 2013 11:21 PM
  • 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 ;
    }

     

    Thursday, August 15, 2013 12:46 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 15, 2013 2:06 AM
  • User-1035692366 posted

    Hi Happy Chen

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

    Thursday, August 15, 2013 3:27 AM
  • User-1035692366 posted

    Hi webcodeexpert

    Wow thats great 

    It even has colour coding 

    Thanks a lot

    Thursday, August 15, 2013 3:35 AM