Tab Resize Not working in document.ready

[Robert]

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?

<div>
    @(Html.Kendo().TabStrip()
        .Name("PassportTabStrip")
        .HtmlAttributes(new { style = "height: 100%;" })
        .Items(tabstrip =>
            {
                tabstrip.Add()
                        .Text("Users")
                        .Selected(true)
                        .LoadContentFrom("GetUsers", "Passport");
                tabstrip.Add()
                        .Text("Roles")
                        .LoadContentFrom("GetRoles", "Passport");
                tabstrip.Add()
                        .Text("Functions")
                        .LoadContentFrom("GetFunctions", "Passport");
            })
    )
</div>

$(document).ready(function ()
{
    ResizeTabs();
});

$(window).resize(ResizeTabs);

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;
    tabstrip.children('.k-content').height(contentHeight);
}

[Dimo]

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.

Html.Kendo().TabStrip()
              .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) {
        ResizeTabs();
    });
});

widget.one() is used in the same way as widget.bind(), but is executed only once.

http://docs.telerik.com/kendo-ui/getting-started/widgets#example---subscribe-to-an-event-using-the-bind-method


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");

Regards,
Dimo
Telerik

 

 

[Robert]

That worked great.

Thanks.