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

Tabstrip in a Window rendering issues

4 Answers 27 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Kevin
Top achievements
Rank 1
Kevin asked on 17 Sep 2011, 12:00 AM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Tunev
Telerik team
answered on 19 Sep 2011, 11:45 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Kevin
Top achievements
Rank 1
answered on 19 Sep 2011, 09:32 PM
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();
            }
        });
    }
0
Georgi Tunev
Telerik team
answered on 20 Sep 2011, 01:12 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Kevin
Top achievements
Rank 1
answered on 20 Sep 2011, 07:10 PM
Thanks Georgi!  That was it.  
Tags
TabStrip
Asked by
Kevin
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or