ajax中的container,Ajax Tabcontainer Header切断了Chrome

解决了.下面的问题和我可以概述的简单修复.

Visual Studio 2013 AjaxToolkit 4.5.7.1213(最新稳定版).

Web表单应用.我有一个非常简单的页面.它在IE兼容性视图或Chrome的IE标签扩展中完美呈现.但是,在Chrome 33.0.1750.154(几周旧版本)或IE 11中,tabcontainer中标签的标题会被水平切断;底部不存在.我用google搜索过,其他人前一段时间也有过类似的问题,但似乎没有什么能轻易解决它.如果我使用选项卡面板的内联HeaderText或标题文本部分无关紧要,则会发生同样的事情.

我发现如果我停止使用bootstrap.css,问题就解决了.

这是问题所在:

ajaxToolkit:TabContainer使用的默认css类是.ajax__tab_tab.违规代码位于.ajax__tab_tab中.它指定高度为13px.这切断了案文.如果我将它增加到18像素(默认字体大小),没有问题.

由于可以指定ajaxToolkit:TabContainer的cssclass,我所做的是从ajaxToolkit站点复制大部分.ajax__tab_xp,将其重命名为.customAjaxTab,将其放在我自己的.css文件中,然后设置CssClass =“customAjaxTab”在我的TabContainer中.

不幸的是,TabContainer默认css调用的图像使用了我无法工作的“WebResource”调用,所以我制作了我的图像.我的新css:

.customAjaxTab .ajax__tab_disabled { cursor: default; color: #A0A0A0; }

.customAjaxTab .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(Images/Tab_bottomline.png) repeat-x bottom;height:21px; }

.customAjaxTab .ajax__tab_header .ajax__tab_outer {padding-right:4px;background:url(Images/Tab_unselected.png) no-repeat right;height:21px;}

.customAjaxTab .ajax__tab_header .ajax__tab_inner {padding-left:3px;background:url(Images/Tab_unselected.png) no-repeat;}

.customAjaxTab .ajax__tab_header .ajax__tab_tab {height:18px;padding:4px;margin:0px;color:black;}

.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_outer {cursor:pointer;background:url(Images/Tab_unselected_hover.png) no-repeat right;}

.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_inner {cursor:pointer;background:url(Images/Tab_unselected_hover.png) no-repeat;}

.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_tab {cursor:pointer;}

.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_outer {background:url(Images/Tab_selected.png) no-repeat right;}

.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_inner {background:url(Images/Tab_selected.png) no-repeat;}

.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_tab {color:black;}

.customAjaxTab .ajax__tab_body {font-family:verdana,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现当页面滚动距离大于taskDetail-body-header时,antd的Tabs组件的选项卡头固定在顶部,并且在切换标签页后保持固定状态,可以使用CSS的`position: sticky`属性和JavaScript来实现。 首先,在你的HTML文件,给Tabs组件的选项卡头添加一个id,例如: ```html <a-tabs v-model="activekey" @change="changeActivekey" id="tabsContainer"> <!-- 选项卡内容 --> </a-tabs> ``` 然后,在你的CSS文件添加以下样式: ```css #tabsContainer { position: sticky; top: 0; z-index: 1; } ``` 这将使选项卡头在页面滚动时固定在顶部。 接下来,在你的JavaScript文件,添加以下代码: ```javascript // 监听标签页切换事件 document.addEventListener('DOMContentLoaded', function() { const tabs = document.querySelectorAll('#tabsContainer a-tab-pane'); tabs.forEach(tab => { tab.addEventListener('click', function() { // 判断选项卡头是否固定在顶部 const tabsContainer = document.getElementById('tabsContainer'); const isSticky = tabsContainer.getBoundingClientRect().top === 0; // 如果固定在顶部,则让页面回跳到顶部 if (isSticky) { window.scrollTo({ top: 0, behavior: 'smooth' }); } }); }); }); ``` 这段代码会在标签页切换时检查选项卡头是否固定在顶部,如果是,则通过`window.scrollTo`方法让页面回跳到顶部。 这样,当页面滚动距离大于taskDetail-body-header时,antd的Tabs组件的选项卡头将固定在顶部,并且在切换标签页后仍然保持固定状态。当选项卡头不固定在顶部时,切换标签页后页面会回跳到顶部。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值