Overriding Default CSS in ASP.NET AJAX Control Toolkit's TabContainer Control
Solution 1
After a lot of messing around, I got it working, though I'm not entirely sure what I did...
I think, I had to:
- Manually add CssClass to ajaxToolkit:TabContainer, as even when setting it via the properties it didn't seem to generate.
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.
Solution 2
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...
Dave Mackey
Love to code: Python, JS, C#, PHP, SQL, VB.NET, HTML, CSS. In ancient days I coded in QuickBasic, ASP, and VBScript. I'm a friendly introvert with solid communication skills. I work hard and have refined problem solving skills. When I was younger I worked in a variety of industries (commercial fisherman, stone mason, lawn care, factory, custodial, youth leader). I settled on IT and have experience working in a startup, higher education, and with non-profits.
Updated on June 04, 2022Comments
-
Dave Mackey almost 2 years
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
-
Dave Mackey about 12 yearsThanks, although...unfortunately, that hasn't made a difference.
-
Tom Stickel over 10 yearsI'm modifying the class , and I just need __xp and 25 px is just fine