Tab Resize Not working in document.ready

3 posts, 1 answers
  1. Robert
    Robert avatar
    14 posts
    Member since:
    Feb 2014

    Posted 05 May 2014 Link to this post

    I have code to resize my Tabs to match the browser size.  The problem is when I call this method inside of $(document).ready it does not resize the 1st tab.  The others seem to size just fine.  If I move my call to ResizeTabs outside of $(document).ready then it seems to work fine?  My question is why?

            .HtmlAttributes(new { style = "height: 100%;" })
            .Items(tabstrip =>
                            .LoadContentFrom("GetUsers", "Passport");
                            .LoadContentFrom("GetRoles", "Passport");
                            .LoadContentFrom("GetFunctions", "Passport");

    $(document).ready(function ()


    function ResizeTabs()
        var tabstrip = $('#PassportTabStrip');
        var headerHeight = $('header').height();
        var footerHeight = $('footer').height();
        var windowHeight = $(window).height();
        var newHeight = windowHeight - headerHeight - footerHeight - 50;
        tabstrip.css({ height: newHeight + "px" });
        var contentHeight = tabstrip.innerHeight() - tabstrip.children('.k-tabstrip-items').outerHeight() - 16;
  2. Answer
    Dimo avatar
    8318 posts

    Posted 07 May 2014 Link to this post

    Hi Robert,

    Loading the TabStrip content with Ajax, and the tab container's expand animations take some time to be executed. When you include the resizing logic in document.ready, it is executed too early. I can offer you the following approach:

    1. Set the TabStrip animation to be fade in/out, instead of the default expand. This will spare the need to use timeouts.

                  .Animation(fx => {
                      fx.Open(o => o.Fade(FadeDirection.In));
                      fx.Close(o => o.Fade(FadeDirection.Out));

    2. Attach a one-time handler for the widget's contentLoad event.

    $(document).ready(function () {
        $("#TabStripID").data("kendoTabStrip").one("contentLoad", function (e) {
    }); is used in the same way as widget.bind(), but is executed only once.

    3. When setting an explicit height to the TabStrip's content containers, it is required to enable scrolling:

    tabstrip.children('.k-content').height(contentHeight).css("overflow", "auto");


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. UI for ASP.NET AJAX banner
  4. Robert
    Robert avatar
    14 posts
    Member since:
    Feb 2014

    Posted 07 May 2014 in reply to Dimo Link to this post

    That worked great.

Back to Top