Solved

ASP.NET 2.0, AJAX Tabs Control

Posted on 2008-06-24
10
5,524 Views
Last Modified: 2013-11-07
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
Comment
Question by:derekkromm
  • 5
  • 5
10 Comments
 
LVL 8

Expert Comment

by:CoyotesIT
ID: 21860064
Can you post your code, what control are you using for TabPanel?

0
 
LVL 15

Author Comment

by:derekkromm
ID: 21860171

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

Expert Comment

by:CoyotesIT
ID: 21860331
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
 
LVL 15

Author Comment

by:derekkromm
ID: 21860343
setting height on the tabcontainer changes the height on the entire container, not the tabs themselves
0
 
LVL 15

Author Comment

by:derekkromm
ID: 21860363
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 8

Expert Comment

by:CoyotesIT
ID: 21860409
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
 
LVL 8

Expert Comment

by:CoyotesIT
ID: 21861099
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
 
LVL 15

Author Comment

by:derekkromm
ID: 21865104
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
 
LVL 8

Accepted Solution

by:
CoyotesIT earned 500 total points
ID: 21866782
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
 
LVL 15

Author Closing Comment

by:derekkromm
ID: 31470315
tyvm!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now