TabContainer not showing tab pages correctly when css added about ajaxcontroltoolkit HOT 20 CLOSED

@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;
    }

from ajaxcontroltoolkit.

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.

from ajaxcontroltoolkit.

I also see this problem... bump

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

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;
}

from ajaxcontroltoolkit.

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?

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

@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.

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

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.

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

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.

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.

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

from ajaxcontroltoolkit.