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

Posted 2023-03-06

【中文标题】覆盖 ASP.NET AJAX 控件工具包的 TabContainer 控件中的默认 CSS

【英文标题】：Overriding Default CSS in ASP.NET AJAX Control Toolkit's TabContainer Control

【发布时间】：2012-05-14 03:38:26

【问题描述】：

我在 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

【问题讨论】：

我发现解决这个问题的唯一方法是下载 AJAX 工具包源代码并去掉废话，以便控件真正可用。

【参考方案1】：

我不得不修改一些网络表单，升级到引导程序，突然我注意到有些页面有

所以我看到生成的类是

class="ajax__tab_xp"

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

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

这应该对其他人有用。

【参考方案2】：

戴夫，

我也做了同样的事情。复制 Tab CSS 并修改为我心中的内容。他们我试图禁用标签。使用默认 CSS 可以正常工作。我认为我的版本中一定缺少某些东西。但是检查生成的源代码，TAB 似乎在页面中生成了一些 js 来启用/禁用 - 如果我们被允许在这个项目中这样做，我会首先使用 JQuery。

如果您不想去 javascript 城市，请使用 !Important 覆盖默认 css。

【参考方案3】：

经过一番折腾，我得到了它的工作，虽然我不完全确定我做了什么......

我想，我必须：

手动将 CssClass 添加到 ajaxToolkit:TabContainer，即使通过它似乎没有生成的属性进行设置也是如此。

我尝试覆盖类 ajax__tab_xp，但没有奏效，因此我创建了一个名为 ajax__custom 的新类，并且它奏效了。所以我的 CSS 最终看起来像：

.ajax__custom .ajax__tab_header .ajax__tab_tab

    height: 100px;

希望这对其他人有所帮助。

【讨论】：

我正在修改类，我只需要 __xp 和 25 px 就可以了

【参考方案4】：

尝试像这样使用 !important：

.ajax__tab_xp .ajax__tab_header .ajax__tab_tab 

    height:83px !important;

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

【讨论】：

谢谢，虽然...不幸的是，这并没有什么不同。