Solved

ASP.NET 2.0, AJAX Tabs Control

Posted on 2008-06-24
10
5,540 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
If you're a developer or IT admin, you’re probably tasked with managing multiple websites, servers, applications, and levels of security on a daily basis. While this can be extremely time consuming, it can also be frustrating when systems aren't wor…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…

695 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