CODEWITHSUNDEEP
asp.netcssajaxasp.net-ajaxajaxcontroltoolkit
Dave Mackey
Dave Mackey

Reputation: 4432

Overriding Default CSS in ASP.NET AJAX Control Toolkit's TabContainer Control

I am using the ASP.NET AJAX TabContainer control in a web application. I've placed images in the headers for each tab rather than using text - but the images are truncated b/c the default CSS for TabContainer states that the header is only 13px high:

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
 {
    height:13px;
    padding:4px;
    margin:0px;
    background:url("tab.gif") repeat-x;
  }

I have a CSS file I'm using and have added the following line to override that contained in the default CSS for TabContainer:

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
 {
    height:83px;
    padding:4px;
    margin:0px;
    background:url("tab.gif") repeat-x;
  }

But it is still using the default 13px, why?

You can see the default css file here: Default CSS File

Upvotes: 4

Views: 16495

Answers (4)

Tom Stickel
Tom Stickel

Reputation: 20421

I am having to modify some web forms, upgraded to bootstrap and suddenly I noticed that some pages had

So The class I see generated is 

class="ajax__tab_xp"

Thus based on answers above , I found that 25px is all I need

   .ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
    {
        height:25px !important;
    }

That should work for others hopefully.

Upvotes: 0

dbc Austin
dbc Austin

Reputation: 1

Dave,

I did the same thing. Copied Tab CSS and modified to my hearts content. Them I tried to disable tabs. This was working fine using default CSS. I thought something must be missing in my version. But checking generated source, it looks like TAB generates some js in page to enable/disable - Which, if we were permitted to to that on this project I would have gone with JQuery in the first place.

Save yourself some grief and use !Important to override default css if you dont want to go to javascript city.

Upvotes: 0

Dave Mackey
Dave Mackey

Reputation: 4432

After a lot of messing around, I got it working, though I'm not entirely sure what I did...

I think, I had to:

  1. Manually add CssClass to ajaxToolkit:TabContainer, as even when setting it via the properties it didn't seem to generate.

  2. I tried overriding the class ajax__tab_xp, but that didn't work, so I created a new class called ajax__custom and that worked. So my CSS in the end looked like:

    .ajax__custom .ajax__tab_header .ajax__tab_tab
{
    height: 100px;
}

Hope this helps someone else.

Upvotes: 4

Amir
Amir

Reputation: 639

Try using !important like this:

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 
{
    height:83px !important;
}

by the way, If you don't change other properties of the default class, you don't have to retype them...

Upvotes: 5

Related Questions