[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

ASP.NET 2.0, AJAX Tabs Control

Posted on 2008-06-24
10
Medium Priority
?
5,548 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Learn Veeam advantages over legacy backup

Every day, more and more legacy backup customers switch to Veeam. Technologies designed for the client-server era cannot restore any IT service running in the hybrid cloud within seconds. Learn top Veeam advantages over legacy backup and get Veeam for the price of your renewal

Question has a verified solution.

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

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…

649 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