cssajaxcontroltoolkittabcontainer

AjaxControlToolkit 16.1 TabContainer CSS Not Working/Breaking

I was using Ajax Control Toolkit ver 15 with TabContainer and using CSS without any problem.

However once upgraded to ver 16.1, the TabContainer CSS is breaking. The content of the TabContainer is now showing towards the right side of the tabs as the image below.

enter image description here

Solution

  • After much searching, found the solution. But there is not sharing in stackoverflow yet, thus I'm sharing it over here. The original answer comes from HERE

    I will share the workaround over here in case the link is broken in future.

    What I did was add the below CSS into the tab CSS file.

    .Tab .ajax__tab_header:after {
    clear: both;
}

.Tab .ajax__tab_header:before, .tab .ajax__tab_header:after {
    content: "";
    display: table;
}

    After that, add also the following 'display' into your header style

    .Tab.ajax__tab_header{
    display: inline-block;
}

    Note that you're required to change the .Tab into your own class name.

    The result will back to normal. enter image description here