Tabstrip height fading in and out when switching tabs

[Jaap]

Hi,

I have a tabstrip in a window. Is working fine expect that when I switch between tabs the height of the complete tabstrip content area is decreasing to zero and then growing to the size of the new tab. The complete window is resizing also.

I want to fix the height of the content areas to the maximum height of the different tab contents. How can I do that?
Should I do a jQuery loop through all the tab content areas and calculate the max height and then set the height of each content area?
Or is there some configuration setting so the tabstrip does this for me?

Regards, Jaap

[Dimo]

Hi Jaap,

Please set animation:false in the TabStrip initialization statement. Alternatively, use a fade animation, as shown in this demo:

http://demos.kendoui.com/web/tabstrip/index.html

All the best,
Dimo
the Telerik team

[Jaap]

Ok, that's working.
But this does not solve my second question.
Is there a way to define the height of tabs equaly?

Regards, Jaap

[Dimo]

Hi Jaap,

Sorry about missing the second question. Yes, you should iterate through the tab content containers and see which one is the highest. Then, set this height to all content div's.

Regards,
Dimo
the Telerik team

[Jaap]

Hi Dimo,
I use this Tabstrip in a modal Window.
I must do the calculation of the max height of the tabs in the Activate event of the window, because in an earlier stage the height() method of jQuery is returning zero.
But setting the height of the tabs in the Activate event is visual for the user because the window is already visible.
Is it possible to calculate the height of content when it is not yet visible?

Doing this in the window open event is also to early.
Strange thing is that the call to the window center() methods in the open event is working ok. So for some reason, that method can calculate the height of the content, else it would not be able to posistion the window correctly.

Regards, Jaap

[Dimo]

Hello Jaap,

You have a couple of options -

- open the Window somewhere outside the screen (set suitable top and left styles to the Window wrapper <div>), set the TabStrip heights and then center it.
- set a visibility:hidden style to the TabStrip, set the heights in Activate and then remove the visibility style.

Greetings,
Dimo
the Telerik team