Ajax Tabcontainer Header Disabled in Chrome

Question

solvable. The problem is below and as a simple fix that I can describe.

Visual Studio 2013 + AjaxToolkit 4.5.7.1213 (latest stable version).

Web forms. I have a very simple page. It perfectly displays IE compatibility view or Chrome IE tab extension. However, in Chrome 33.0.1750.154 (a couple of weeks from the old version) or IE 11, the tab header in the tabcontainer is disabled horizontally; there’s simply no bottom. I have googled and others had similar problems a while ago, but nothing seems to have easily resolved this. It doesn’t matter if I use the built-in HeaderText tabs or the header section of the text, the same thing happens.

I found that the problem was resolved if I stopped using bootstrap.css. Here is the problem:

Ajaxtoolkit has its own CSS, and this can be observed by looking at the source code for a tab container on the Internet: http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Server/AjaxControlToolkit/Tabs/Tabs_resource.css

The default css class that uses ajaxToolkit: TabContainer, -.ajax__tab_tab. The violation code is in .ajax__tab_tab. It sets the height to 13 pixels. This cuts off the text. If I increase it to 18 pixels (default font size), no problem.

Since cssclass ajaxToolkit: TabContainer can be specified, what I did was copy most of .ajax__tab_xp from the ajaxToolkit website, rename it to .customAjaxTab, place it in my own .css file, and then set Cssclass = "customAjaxTab" in my TabContainer container.

, , ccContainer "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,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

CSS TabContainer: http://www.asp.net/ajaxlibrary/act_TabContainer.ashx

Answer 1

, bootstrap.css bootstrap.min.css

.ajax__tab_tab
{
     -webkit-box-sizing: content-box!important;
     -moz-box-sizing: content-box!important;
     box-sizing: content-box!important;
}