Hi Piyush,

Please inspect the following example:

http://jsfiddle.net/dimodi/QZcH7/

In short, you need to make calculations and resize the TabStrip content wrappers manually on window resize, and on initial load. This is because the TabStrip widget consist of two sibling elements (the tabs wrapper and the content wrappers) and currently supported web standards do not allow script-less resizing in such a scenario.

Best wishes,
Dimo
the Telerik team

Hi Piyush,

My demo works as expected in Chrome, so please compare the code with your implementation to see what's wrong.

All the best,
Dimo
the Telerik team

Dimo,

Thank you for your great support. I figured this out. I am not wrapping the tabs within splitter - that was the issue. 

Corrected the javascript to not use '.k-pane' and now it works. 

For benefit of otheres -- 

$(window).resize(function() {
resizeTabs();
});


function resizeTabs() {
   var parentHeight = $("#tabStrip").innerHeight();
   var tabTop = $("#tabStrip").position().top;
var tabsHeight = $("#tabStrip > .k-tabstrip-items").outerHeight();
//alert(parentHeight);
$("#tabStrip > div").height(parentHeight - tabsHeight - 18 - tabTop);
    }

Thanks,
Piyush Bhatt

Dimo,

On your example solution, it appears that the resize event is happening before the window actually gets resized.  So, the value of the $("#tabstrip").closest(".k-pane").innerHeight() is actually the value BEFORE the resize occurs.

Try moving the top horizontal splitter a large amount, then a small amount, and then a large amount again.  You will notice the resizes are stale (one move previous).

Do you have a way to get resize events AFTER the user resize has been performed?

Thanks

Hello Eric,

The layoutChange event is what you are looking for.

All the best,
Alex Gyoshev
the Telerik team