?
Solved

ASP.NET 2.0, AJAX Tabs Control

Posted on 2008-06-24
10
Medium Priority
?
5,551 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
Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

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

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

Question has a verified solution.

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

Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?
Suggested Courses

807 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