覆盖ASP.NET AJAX控件工具包中TabContainer控件的默认CSS

Question

我正在一个Web应用程序中使用ASP.NET AJAX TabContainer控件。我已经在每个标签的头部放置了图片，而不是使用文本 - 但是这些图片被截断了，因为TabContainer的默认CSS样式规定头部高度仅为13px：

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

我有一个正在使用的CSS文件，并已添加以下行以覆盖TabContainer中包含的默认CSS中的行：

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

但它仍然使用默认的13像素字体大小，为什么？

您可以在此处查看默认的CSS文件： 默认CSS文件。

- Dave Mackey

---

我发现克服这个问题的唯一方法是下载AJAX工具包源代码并清理其中的垃圾，使控件实际可用。 - TheGeekYouNeed

Answer 1

尝试像这样使用 !important：

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

顺便说一下，如果您不更改默认类的其他属性，则无需重新输入它们...

- Amir

---

谢谢，虽然...不幸的是，这并没有产生任何影响。 - Dave Mackey

Answer 2

经过许多折腾，我终于搞定了，尽管我并不完全确定自己做了什么...

我认为我必须要：

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;
   }
   

希望这能帮到其他人。

- Dave Mackey

---

我正在修改这个类，我只需要__xp，25像素就可以了。 - Tom Stickel

Answer 3

Dave，

我也做了同样的事情。复制了Tab CSS并根据自己的需要进行修改。然后我尝试禁用选项卡。使用默认CSS可以正常工作。我认为我的版本中可能缺少某些内容。但是检查生成的源代码，看起来TAB在页面中生成一些js以启用/禁用 - 如果我们被允许在这个项目中这样做，我会首先选择JQuery。

如果您不想进入JavaScript城市，请使用!Important覆盖默认CSS，以避免麻烦。

- dbc Austin

Answer 4

我需要修改一些网页表单，升级到了Bootstrap，突然发现有些页面出现了问题。

所以我看到生成的类是：

class="ajax__tab_xp"

因此，根据上面的答案，我发现25px就足够了。

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

希望这对其他人有用。

- Tom Stickel