• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5562
  • Last Modified:

ASP.NET 2.0, AJAX Tabs Control

OK, I haven't been able to find anything on this. How can I change the height of the tabs on a TabPanel?

I want to use images rather than text in the tab headers, but it won't size vertically. See attached image for further info. The images are like cut in half and I've tried everything I can think of to re-size it.

Thanks a ton

tabs-issue.bmp
0
derekkromm
Asked:
derekkromm
  • 5
  • 5
1 Solution
 
CoyotesITCommented:
Can you post your code, what control are you using for TabPanel?

0
 
derekkrommAuthor Commented:

<%@ Page
    Language="C#"
    MasterPageFile="~/DefaultMaster.master"
    AutoEventWireup="true"
    CodeFile="Tabs.aspx.cs"
    Inherits="Tabs_Tabs"
    Title="Tabs Sample"
    Theme="SampleSiteTheme" %>
<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="ajaxToolkit" %>
<asp:Content ContentPlaceHolderID="SampleContent" runat="Server">
    <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
    <script type="text/javascript">
        function PanelClick(sender, e) {
            var Messages = $get('<%=Messages.ClientID%>');
            Highlight(Messages);
        }
 
        function ActiveTabChanged(sender, e) {
            var CurrentTab = $get('<%=CurrentTab.ClientID%>');
            CurrentTab.innerHTML = sender.get_activeTab().get_headerText();
            Highlight(CurrentTab);
        }
 
        var HighlightAnimations = {};
        function Highlight(el) {
            if (HighlightAnimations[el.uniqueID] == null) {
                HighlightAnimations[el.uniqueID] = AjaxControlToolkit.Animation.createAnimation({
                    AnimationName : "color",
                    duration : 0.5,
                    property : "style",
                    propertyKey : "backgroundColor",
                    startValue : "#FFFF90",
                    endValue : "#FFFFFF"
                }, el);
            }
            HighlightAnimations[el.uniqueID].stop();
            HighlightAnimations[el.uniqueID].play();
        }
        
        function ToggleHidden(value) {
            $find('<%=TabContainer1.ClientID%>').get_tabs()[2].set_enabled(value);
        }
    </script>
    <div class="demoarea">
        <div class="demoheading">Tabs Demonstration</div>
        The following user profile is presented in Tab format. You can click on the tab
        and modify specific fields.
        <br /><br />
        
        Toolkit User Profile:
        <ajaxtoolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
            <ajaxtoolkit:TabPanel runat="server" ID="TabPanel1">
            <HeaderTemplate>
                <img src="../Images_SBS/AlcantaraLogoTM.JPG" alt="Alcantara" width="150" /></HeaderTemplate>
                <ContentTemplate>ALCANTARA!!!</ContentTemplate>
            </ajaxtoolkit:TabPanel>
            <ajaxtoolkit:TabPanel runat="server" ID="TabPanel2">
            <HeaderTemplate>
                <img src="../Images_SBS/VerdexWordR.JPG" alt="VerdeX" width="150" />
               </HeaderTemplate>
                <ContentTemplate>VERDEX!!!</ContentTemplate>
            </ajaxtoolkit:TabPanel>
            <ajaxtoolkit:TabPanel runat="server" ID="TabPanel3">
            <HeaderTemplate>
                <img src="../Images_SBS/Hambro-logo.JPG" alt="HAMBROOOOOOOOOOO!" width="150" />
               </HeaderTemplate>
                <ContentTemplate>HAMBROOOOOOOO!!!</ContentTemplate>
            </ajaxtoolkit:TabPanel>
            </ajaxtoolkit:TabContainer>
        <br />
        
        <asp:CheckBox runat="server" ID="showComponents" Checked="true"
            Text=" Show Controls Owned" onclick="ToggleHidden(this.checked)" />
        <br /><br />
        
        Current Tab:
        <asp:Label runat="server" ID="CurrentTab" /><br />
        <asp:Label runat="server" ID="Messages" />
    </div>
    <div class="demobottom"></div>
    
    <asp:Panel ID="Description_HeaderPanel" runat="server" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Description_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg" AlternateText="collapse" />
            Tabs Description
        </div>
    </asp:Panel>
    <asp:Panel ID="Description_ContentPanel" runat="server" Style="overflow: hidden;">
        <p>
            TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be
            used to organize page content. A TabContainer is a host for a number of TabPanel
            controls.
            <br /><br />
            Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate
            that defines its content. The most recent tab should remain selected after a postback,
            and the Enabled state of tabs should remain after a postback as well.
        </p>
    </asp:Panel>
    
    <asp:Panel ID="Properties_HeaderPanel" runat="server" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Properties_ToggleImage" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="expand" />
            Tabs Properties
        </div>
    </asp:Panel>
    <asp:Panel ID="Properties_ContentPanel" runat="server" Style="overflow: hidden;" Height="0px">
        <p>The control above is initialized with this code.  The <em>italic</em> properties are optional:</p>
<pre>&lt;ajaxToolkit:TabContainer runat="server" 
        <em>OnClientActiveTabChanged</em>="ClientFunction" 
        <em>Height</em>="150px"&gt;
    <strong>&lt;ajaxToolkit:TabPanel</strong> runat="server" 
        <em>HeaderText</em>="Signature and Bio"
        &lt;ContentTemplate&gt;
            ...
        &lt;/ContentTemplate&gt;
    <strong>/&gt;</strong>
&lt;/ajaxToolkit:TabContainer&gt;</pre>
        <b>TabContainer Properties</b>
        <ul>
            <li><strong>ActiveTabChanged (Event)</strong> - Fired on the server side when a tab
                is changed after a postback</li>
            <li><strong>OnClientActiveTabChanged</strong> - The name of a javascript function to
                attach to the client-side tabChanged event</li>
            <li><strong>CssClass</strong> - A css class override used to define a custom look and
                feel for the tabs. See the Tabs Theming section for more details.</li>
            <li><strong>ActiveTabIndex</strong> - The first tab to show</li>
            <li><strong>Height</strong> - sets the height of the body of the tabs (does not include
                the TabPanel headers)</li>
            <li><strong>Width</strong> - sets the width of the body of the tabs</li>
            <li><strong>ScrollBars</strong> - Whether to display scrollbars (None, Horizontal,
                Vertical, Both, Auto) in the body of the TabContainer</li>
        </ul>
        <b>TabPanel Properties</b>
        <ul>
            <li><strong>Enabled</strong> - Whether to display the Tab for the TabPanel by default.
                This can be changed on the client.</li>
            <li><strong>OnClientClick</strong> - The name of a javascript function to attach to
                the client-side click event of the tab.</li>
            <li><strong>HeaderText</strong> - The text to display in the Tab</li>
            <li><strong>HeaderTemplate</strong> - A TemplateInstance.Single ITemplate to use to
                render the header</li>
            <li><strong>ContentTemplate</strong> - A TemplateInstance.Single ITemplate to use to
                render the body</li>
        </ul>
    </asp:Panel>
    
    <asp:Panel runat="server" ID="TabCSS_HeaderPanel" Style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="TabCSS_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg"
                AlternateText="collapse" />
            Tabs Theming
        </div>
    </asp:Panel>
    <asp:Panel runat="server" ID="TabCSS_ContentPanel" Style="overflow: hidden;" Height="0px">
        You can change the look and feel of Tabs using the Tabs CssClass property. Tabs
        has a predefined set of CSS classes that can be overridden. It has a default style
        which is embedded as a WebResource and is a part of the Toolkit assembly that has
        styles set for all the sub-classes. You can find the default styles in the Toolkit
        solution in the <strong>"AjaxControlToolkit\Tabs\Tabs.css"</strong> file. If your
        CssClass does not provide values for any of those then it falls back to the default
        value. In the example above the default style is used. To customize the same the
        user would have to set the CssClass property to the name of the CSS style and define
        the styles for the individual classes so that the various elements in a Tab control
        can be styled accordingly. For example if the CssClass property was set to "CustomTabStyle"
        this is how the css to style the tab header would look:
        <pre>
.CustomTabStyle .ajax__tab_header {
    font-family:verdana,tahoma,helvetica;
    font-size:11px;
    background:url(images/tab-line.gif) repeat-x bottom;
}</pre>
        <strong>Tabs Css classes</strong>
        <br />
        <ul>
            <li><strong>.ajax__tab_header:</strong>
                A container element that wraps all of the tabs at the top of the TabContainer.
                Child CSS classes:.ajax__tab_outer. </li>
            <li><strong>.ajax__tab_outer:</strong> An outer element of a tab, often used to set
                the left-side background image of the tab.Child CSS classes: .ajax__tab_inner.
            </li>
            <li><strong>.ajax__tab_inner:</strong> An inner element of a tab, often used to set
                the right-side image of the tab. Child CSS classes:.ajax__tab_tab. </li>
            <li><strong>.ajax__tab_tab:</strong> An element of the tab that
                contains the text content. Child CSS classes:none.</li>
            <li><strong>.ajax__tab_body</strong>: A container element that wraps the area where
                a TabPanel is displayed. Child CSS classes: none.</li>
            <li><strong>.ajax__tab_hover</strong> . This is applied to a tab when the mouse is hovering
                over. Child CSS classes:.ajax__tab_outer. </li>
            <li><strong>.ajax__tab_active</strong>: This is applied to a tab when it is the currently
                selected tab. Child CSS classes:.ajax__tab_outer. </li>
        </ul>
    </asp:Panel>
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeDescription" runat="Server" TargetControlID="Description_ContentPanel"
        ExpandControlID="Description_HeaderPanel" CollapseControlID="Description_HeaderPanel"
        Collapsed="False" ImageControlID="Description_ToggleImage" />
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeProperties" runat="Server" TargetControlID="Properties_ContentPanel"
        ExpandControlID="Properties_HeaderPanel" CollapseControlID="Properties_HeaderPanel"
        Collapsed="True" ImageControlID="Properties_ToggleImage" />
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeTabsCSS" runat="Server" TargetControlID="TabCSS_ContentPanel"
        ExpandControlID="TabCSS_HeaderPanel" CollapseControlID="TabCSS_HeaderPanel" Collapsed="True"
        ImageControlID="TabCSS_ToggleImage" />
</asp:Content>

Open in new window

0
 
CoyotesITCommented:
Try adding the height property to your TabContainer

i.e.

<ajaxtoolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" height="175">

I don't think the property can be set on the individual tabPanel's

The height of tabs should all be the same, although I could imagine someone somewhere would want to have that, though I dont think that is what you are looking for.

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
derekkrommAuthor Commented:
setting height on the tabcontainer changes the height on the entire container, not the tabs themselves
0
 
derekkrommAuthor Commented:
so, to be clear, where the screenshot currently shows "ALCANTARA!!!", setting the height to 200px just adds a bunch of blank space underneath that line and makes that panel larger rather than setting the size of the actual tabs themselves
0
 
CoyotesITCommented:
I am pulling down the controls right now, take a look at this and try the TabTheming

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Tabs/Tabs.aspx

Tabs Css classes

.ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer. Child CSS classes:.ajax__tab_outer.
.ajax__tab_outer: An outer element of a tab, often used to set the left-side background image of the tab.Child CSS classes: .ajax__tab_inner.
.ajax__tab_inner: An inner element of a tab, often used to set the right-side image of the tab. Child CSS classes:.ajax__tab_tab.
.ajax__tab_tab: An element of the tab that contains the text content. Child CSS classes:none.
.ajax__tab_body: A container element that wraps the area where a TabPanel is displayed. Child CSS classes: none.
.ajax__tab_hover . This is applied to a tab when the mouse is hovering over. Child CSS classes:.ajax__tab_outer.
.ajax__tab_active: This is applied to a tab when it is the currently selected tab. Child CSS classes:.ajax__tab_outer.


I would imagine in your CSS you can specify the height through this then.

0
 
CoyotesITCommented:
alright, so I played around with it a bit and here is what I was able to find, of course you will need to modify to your images and here is a good site for reference.

http://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx
<style type="text/css">        
        #tc_head .ajax__tab_inner, #tc_head .ajax__tab_tab, #tc_head .ajax__tab_outer
        {
        	background-color:#FFCCCC;
            height:300px;
            width:300px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
        <div>
        
        <ajaxToolkit:TabContainer ID="tc_head" runat="server" Height="300px">
            <ajaxToolkit:TabPanel runat="server">
            <HeaderTemplate>
                <div style="background:#000000 url(http://i.ivillage.com/DF/073106/energydrinks/DF_Tab_366.jpg) no-repeat; height:300px;"><h2>Drink</h2></div>
            </HeaderTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="server" HeaderText="Forum">
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="server" HeaderText="Downloads">
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="server" HeaderText="Support">
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>
        </div>
    </form>

Open in new window

0
 
derekkrommAuthor Commented:
still nothing

attaching full code and 2 screenshots. when i look in design tab of vs2005, it looks ok. when i view in browser, its not


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ 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">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">        
        #tc_head .ajax__tab_inner, #tc_head .ajax__tab_tab, #tc_head .ajax__tab_outer
        {
        	background-color:#FFCCCC;
            height:200px;
            width:200px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
 
    <ajaxtoolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="200px">
            <ajaxtoolkit:TabPanel runat="server" ID="TabPanel1">
            <HeaderTemplate>
                <img src="Images_SBS/AlcantaraLogoTM.JPG" alt="Alcantara" width="150" /></HeaderTemplate>
                <ContentTemplate>ALCANTARA!!!</ContentTemplate>
            </ajaxtoolkit:TabPanel>
            <ajaxtoolkit:TabPanel runat="server" ID="TabPanel2">
            <HeaderTemplate>
                <img src="Images_SBS/VerdexWordR.JPG" alt="VerdeX" width="150" />
               </HeaderTemplate>
                <ContentTemplate>VERDEX!!!</ContentTemplate>
            </ajaxtoolkit:TabPanel>
            <ajaxtoolkit:TabPanel runat="server" ID="TabPanel3">
            <HeaderTemplate>
                <img src="Images_SBS/Hambro-logo.JPG" alt="HAMBROOOOOOOOOOO!" width="150" />
               </HeaderTemplate>
                <ContentTemplate>HAMBROOOOOOOO!!!</ContentTemplate>
            </ajaxtoolkit:TabPanel>
            </ajaxtoolkit:TabContainer>
    </div>
    </form>
</body>
</html>

Open in new window

tabs-issue2.bmp
tabs-issue3.bmp
0
 
CoyotesITCommented:
in my code or CSS i was calling #tc_head which was the ID of my tabcontainer

your's is TabContainer1

try putting #TabContainer1 in place of my #tc_head definitions.

You will need to modify the CSS for you'rs however. This was just showing you where the height is controlled for the tabs themselves. There are three parts to the tab:

.ajax__tab_inner
.ajax__tab_outer
.ajax__tab_tab

All of these need to be modified by the height attribute to get the right layout.

My CSS has them grouped together. I would recommend that you keep them seperate so that you can put your background-image definition in each to keep the tab looking smooth.

So try this, and change the url's to the images to match your site of course, as well as tweak the height, etc.



<style type="text/css">
/* The left side of the tab */
#TabContainer1  .ajax__tab_inner
{
height:200px;
background:transparent url(images/tabs/tab_inner.gif) no-repeat top left;
margin:0px;
padding:0px;
}
 
/* The right side of the tab */
#TabContainer1  .ajax__tab_outer
{
height:200px;
background:transparent url(images/tabs/tab_outer.gif) no-repeat top left;
margin:0px;
padding:0px;
}
 
/* The center of the tab */
#TabContainer1  .ajax__tab_tab
{
height:200px;
background:transparent url(images/tabs/tab_tab.gif) no-repeat top left;
margin:0px;
padding:0px;
}
</style>

Open in new window

0
 
derekkrommAuthor Commented:
tyvm!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now