How to avoid collapsing tabstrip content (flickering) at loading tab dynamically?

[Christine]

Hello,

I load content to a tabstrip dynamically via ContentUrl and Ajax.

Most of them have the same height (might differ slightly). 

When I click a tab item the first time, the content is collapsed and expanded, which leads to flickering. After the content of a tab is loaded once, it is fine.

I tried to set a fixed height and switched off animation -> did not solve the problem.

Are there any workarounds to pre-initialise the height of unloaded contents with the height of the selected item and adjust them dynamically  to the required height?

Any chance to avoid collapsing when loading the content dynamically?

Thanks,

Christine

[Aleksandar]

Hello Christine,

One thing I can suggest is to use the reload method to fetch all the tabs after the TabStrip is initialized. This way when a user navigates to a tab it's content will already be loaded:

$("document").ready(function(){
        $('#tabstrip').getKendoTabStrip().reload($('#tabstrip ul li'))
    })

Here is a sample REPL demonstrating the above suggestion.

Regards,
Aleksandar
Progress Telerik

[Christine]

Thanks, Aleksandar!

That helped me to find a good solution for my problem.

Best regards

Christine