This is a migrated thread and some comments may be shown as answers.

Tab Resize Not working in document.ready

2 Answers 271 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 05 May 2014, 03:44 PM
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);
}

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 07 May 2014, 08:42 AM
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
 

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.

 
0
Robert
Top achievements
Rank 1
answered on 07 May 2014, 11:30 AM
That worked great.

Thanks.
Tags
TabStrip
Asked by
Robert
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Robert
Top achievements
Rank 1
Share this question
or