覆盖ASP.NET AJAX Control Toolkit的TabContainer控件中的默认CSS

Question

我在Web应用程序中使用ASP.NET AJAX TabContainer控件。我已将图像放在每个标签的标题中而不是使用文本 - 但图像被截断b / c 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;
  }

但它仍然使用默认的13px，为什么？

您可以在此处查看默认的css文件：Default CSS File

Answer 1

尝试使用！important如下：

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

顺便说一句，如果你不改变默认类的其他属性，你不必重新输入它们......

Answer 2

经过大量的捣乱，我得到了它的工作，虽然我不完全确定我做了什么...

我想，我必须：

1. 手动将CssClass添加到ajaxToolkit：TabContainer，就像通过它似乎无法生成的属性设置它一样。

2. 我尝试重写了类ajax__tab_xp，但这没有用，所以我创建了一个名为ajax__custom的新类，并且有效。所以我的CSS最终看起来像：

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

希望这有助于其他人。

Answer 3

戴夫，

我做了同样的事情。复制了Tab CSS并修改了我心中的内容。我试图禁用标签。这使用默认CSS工作正常。我认为在我的版本中必须遗漏一些内容。但是检查生成的源代码，看起来TAB会在页面中生成一些js来启用/禁用 - 如果我们被允许在这个项目中使用它，我会首先使用JQuery。

为自己保留一些悲伤和使用！如果你不想去javascript city，重要的是覆盖默认的CSS。

Answer 4

我不得不修改一些网页表单，升级到bootstrap，突然我注意到有些页面已经

所以我看到的课程是

class="ajax__tab_xp"

因此根据上面的答案，我发现25px就是我所需要的

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

这应该对其他人有用。