Tabstrip height fading in and out when switching tabs

6 posts, 0 answers
  1. Jaap
    Jaap avatar
    96 posts
    Member since:
    Oct 2012

    Posted 13 Feb 2012 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jaap
    Jaap avatar
    96 posts
    Member since:
    Oct 2012

    Posted 13 Feb 2012 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jaap
    Jaap avatar
    96 posts
    Member since:
    Oct 2012

    Posted 14 Feb 2012 Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Feb 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready