Removing borders from AJAX toolkit tabs panel

3
votes

I'm having a problem with the AjaxControlTollkit Tabs. I want to remove the borders of the tabs since I do not really need them (display reasons). Here is a simplified sample of my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default-Defaut.aspx.cs"
    Inherits="TinTan._Default" MasterPageFile="~/CLF20.Master" Culture="auto"
    UICulture="auto" EnableEventValidation="false" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentMain" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" 
        EnablePageMethods="True" CombineScripts="True">
        <Services>
            <asp:ServiceReference Path="AutoComplete.asmx" />
        </Services>
     </asp:ToolkitScriptManager>
    <div>
    <!--tabs in which all the options will be avaible (using AJAX for faster respone)-->
    <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Always">
    <Triggers>
        <asp:PostBackTrigger ControlID="btnPostBack" />
    </Triggers>
    <ContentTemplate>
        <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="CheckActiveTab" OnActiveTabChanged="TabContainer_ActiveTabChanged" 
             BorderWidth="0px" >

<asp:TabPanel ID="tabAddTan" runat="server" Visible="false">
                <HeaderTemplate>
                    Add Tan (Admin)
                </HeaderTemplate>
                <ContentTemplate>
                    <div class="divTable">
                        <div class="divRow">
                            <asp:Label ID="lblAddTanTitle" runat="server" Text="Add TAN" Font-Bold="true" Font-Size="Large"></asp:Label>
                        </div>
                    </div>
                    <asp:UpdatePanel ID="pnlAddTan" runat="server" UpdateMode="Always">
                        <ContentTemplate>
                            <div class="divTable">
                                <div class="divRow">

                                    <asp:AsyncFileUpload OnUploadComplete="UploadComplete" runat="server" OnUploadedComplete="UploadComplete"
                                        ID="AsynchAddTan" />
                                </div>
                                <div class="divRow">
                                    <asp:Button ID="btnAddTanClick" runat="server" Text="Upload File" OnClick="UploadComplete" />
                                </div>
                            </div>

                        </ContentTemplate>
                    </asp:UpdatePanel>
                </ContentTemplate>
            </asp:TabPanel>
</asp:TabContainer>

Here is what I tried and the results:

  • Using the BorderWidth="0px", BorderStyle="none", BorderColor="white" properties: it did not work, the borders were unchanged
  • adding a CSS class and linking it the the TabContainer with the CssClass property: It removed ALL the style of the tabs, the tabs Header were only plain text. The borders were not there thought

Here is the CSS I used:

<style type="text/css">
        .AjaxBorder .ajax__tab_body
        {
            border:0;
        }
        .AjaxBorder .ajax__tab_tab 
        {
            height:13px;
            padding:4px;
            margin:0;
            background:url(Tabs/tab.gif) repeat-x;
        }
    </style>

It is situated in teh master page. When I was trying to link it to the AjaxTabContainer with CssClass, the .Ajaxborder class was in the choices VS2010 was offering me.

  • Using the style property and putting border:0 none white; in it: same result as the 1st try, there was no changes to the ajax tabs.

The closest I have been to my goal was the 2nd option. But I do not understand why it removes all the style of the tabs when I am only telling him to remove the borders. I also do not understand why the other options do not do a single thing to the tabs.

Thanks Hugo

4
c#asp.netajaxtabsajaxcontroltoolkit
What does the resultant HTML look like? - Nick Daniels
with the CSS or without?? with teh css, all the style from the tabs is gone. They still work but look very ugly. - Hugo

4 Answers

2
votes

In application i applied the CSS in the following way add one dummy tabcontainer after script manager

Styles used .ajax__tab_xp .ajax__tab_tab { height: 21px; } 

.ajax__tab_xp .ajax__tab_header
{
     border:0;
     border-top:0;
     border-top-color:White;

}

use cssclass="ajax__tab_xp" for tabcontainer..It works for me

Also please go through this link if it is useful http://forums.asp.net/t/1300660.aspx/1

2
votes

use 

outline-style:none;

to remove the box on the active tab

or 

outline-color:Blue;

to get a blue color, not that nasty brownish with blue on ajaxcontroltoolkit demo

... .ajax__tab_active .ajax__tab_tab {background:url('tab-active-verticalleft_b.gif') repeat-x; outline-style:none}

1
votes

add !important

<style type="text/css">
        .AjaxBorder .ajax__tab_body
        {
            border:0 !important;
        }
        .AjaxBorder .ajax__tab_tab 
        {
            height:13px;
            padding:4px;
            margin:0;
            background:url(Tabs/tab.gif) repeat-x;
        }
    </style>
0
votes

Simply set outline to 0;

This is how I do it

.MyTabStyle .ajax__tab_active .ajax__tab_tab
{
     outline:0;    
}