Tabstrip in a Window rendering issues

[Kevin]

I am trying to put a tabstrip in a window.  I get some really weird rending issues with the size and width of the tab vs. the size and width of the tabstrip (the grey box that encapsulates the tabstrip).  I've tried it multiple ways and I still get this tabstrip that wants to have even bigger tabs.  I have attached two screen shots.

Any ideas?  I have tried many different ways to display, from having no html attributes (like the demos, straight out of the box), to trying to fix the sizes.

Steve

[Georgi Tunev]

Hello Steve,

I tried your setup (Tabstrip with Grid in it, shown in a Window) and everything worked as expected. Could you please attach a sample project that reproduces the problem?


Regards,
Georgi Tunev
the Telerik team

[Kevin]

Georgi, 
Thanks for the reply.  I have attached my project.  I suspect it has something to do with the way I create the window.

Steve

            var window = $('#Window').length ? $('#Window') : createWindow('Window', result);
            var element = $("#Window").data("tWindow").element;
            $(element).find(".t-content").width(900).height(511);
            window.data('tWindow').center().open();


function createWindow(id, html) {

        var height = 550;
        var width = 550;
        //debugger;

        return $("<div id=" + id + "></div>").tWindow({
            title: '',
            html: html,
            modal: true,
            draggable: true,
            resizable: true,
            height: height,
            width: width,
            onClose: function (e) {
                e.preventDefault();
                $('#Window').data('tWindow').destroy();
            }
        });
    }

[Georgi Tunev]

Hi Steve,

Thank you for the project - I examined it and I see that you set height 390 and width 1040 pixels to the tabstrip, however, when you create the window, you set different dimensions to the content element, which is again the outer element of the tabstrip.
i.e.
in your tabstrip code:
.HtmlAttributes(new { style = "height: 390px; width: 1040px;" })

and then in the LoadWindow() function:
$(element).find(".t-content").width(900).height(511);

I am not quite sure why you do this, but if you remove the line above, the tabstrip will be rendered as expected.

Kind regards,
Georgi Tunev
the Telerik team

[Kevin]

Thanks Georgi!  That was it.