TabContainer not showing tab pages correctly when css added

[rachaeloffaly]

I have a tabcontainer with several tabpanels within it, it shows fine when no css is added, but as soon as I add the css the tabpanels show to the right of the tabs instead of underneath

[downtime0]

I also have this problem when upgrading from 15.1.4 to 16.1.0. Exactly as displayed above. tab panels are pushed out to the right of the tabs and not below.

[jcm4101]

I also see this problem... bump

[rachaeloffaly]

if this is by design how do i get them to show normally again ??

[MikhailTymchukDX]

This behavior is caused by the 27989 issue fix.

When you set up the CssClassattribute for a TabContainer it overwrites the default ajax__tab_xp class with a custom class, thus making the .ajax__tab_xp .ajax__tab_header selector invalid (see Tabs.css).

Hence, you need to maintain these CSS properties when overriding the default ajax__tab_xp class.
Assuming you have custom tabs CSS class, add the following CSS declaration:

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

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

[downtime0]

I'm sorry, I've been messing with the css suggestions above all morning and cannot get them to work. I've even removed my css file and swapped in the entire Tabs.css class referenced above as a whole, to no avail.
This is still a problem for me and I've rolled back again to 15.1.4.
Did the above suggested fix work for anyone else?

[rachaeloffaly]

No I couldn't get it to work either and I tried the same and replaced the css wit the one reference aswell but no luck

I've had to roll back to 15.1.3 due to an issue with modal popup in 15.1.4

[downtime0]

@rachaeloffaly , thank for the feedback, and for what it's worth, I found 15.1.2 to be more stable than 15.1.3 as the latter introduced multiple issues with calendar extenders and format extenders that were fixed for me in 15.1.4.

[MikhailTymchukDX]

There was a typo in the CSS code provided before. The correct code is the following:

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

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

I also attached a sample project to show that this workaround works: TabsTest.zip

[rachaeloffaly]

that's worked for me thanks ,I didn't spot the typo :)

[downtime0]

Yup, I missed the typo also. ".tab" vs ".tabs"
All better now. I hope this officially gets documented if using CssClass="CustomTabs".
here --> https://github.com/DevExpress/AjaxControlToolkit/wiki/TabContainer
and here --> http://ajaxcontroltoolkit.devexpress.com/Tabs/Tabs.aspx

[MikhailTymchukDX]

We updated the code to avoid situations with a corrupted CSS style application when a user defines the CssClass property (see PR #23).
Please consider comments above as a temporary workaround for the code shipped with the v16.1 release.

The new CssTheme property was added, which defines a CSS class that will be added to TabContainer's class attribute.
This ensures that valid CSS selectors will be applied to TabContainer by default.
The default value of CssTheme is TabCssTheme.XP.

If you want to keep pre-v16.1 behavior when defining the CssClass property, set the CssTheme value to TabCssTheme.None.

[jbrian00]

I'm not showing that csstheme is a property for the tabcontainer in version 16.1.

[MikhailTymchukDX]

@jbrian00 This property was added after the v16.1 release.

[rkreddyv]

We have same issue with out changing any CSS. It works fine in development machine but when we move to QA, tabpanels show to the right of the tabs instead of underneath.

Any help is really appreciated.

Ajax: Version: v16.1.1
VS: 2015

Thanks
Rama

[MikhailTymchukDX]

Hi @rkreddyv,
It looks like a local caching problem.
Would you please check if the downloaded CSS matches the one on your development machine?

[rkreddyv]

Thanks @MikhailTymchukDX for the response. I replaced all the JS scripts, CSS content and all the Ajax dlls from my local machine to QA environment. Still same issue.

[MikhailTymchukDX]

@rkreddyv
Would you please specify the browser version you are using?
Also, a sample project that illustrates this issue would be greatly appreciated.

[rkreddyv]

@MikhailTymchukDX: Please ignore my previous comments. Now it is working after adding below to my header style. Thanks Again

   .tabs .ajax__tab_header:after {
        clear: both;
    }
    .tabs .ajax__tab_header:before, .tabs .ajax__tab_header:after {
        content: "";
        display: table;
    }
    .tabs .ajax__tab_header{
        display: inline-block;
    }

[smithmrk]

That works for IE, but it still doesn't not show properly for Chrome.
Any thoughts on why it won't work with Chrome?

Thanks,
Mark

[MikhailTymchukDX]

@smithmrk Would you please provide a sample project so we can investigate what causes this?