This is a migrated thread and some comments may be shown as answers.
full window layout
6 Answers 214 Views
This is a migrated thread and some comments may be shown as answers.
Piyush Bhatt
Top achievements
Rank 2
Piyush Bhatt asked on 16 Dec 2011, 10:31 PM
In RAD ASP controls there was a demo for full-browser window layout using Rad Splitter and panels etc. The nice thing about that demo was while resizing the browser, it allowed to automatically resize all panels within it.

We need similar type of feature in Kendo UI - how do we achieve that? For example,  I need such feature using TabStrip so that the Tab Panel resizes according to the browser size and other items like menu and call remain fix size.

6 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 19 Dec 2011, 02:35 PM
Hi Piyush,

Please inspect the following example:

http://jsfiddle.net/dimodi/QZcH7/

In short, you need to make calculations and resize the TabStrip content wrappers manually on window resize, and on initial load. This is because the TabStrip widget consist of two sibling elements (the tabs wrapper and the content wrappers) and currently supported web standards do not allow script-less resizing in such a scenario.

Best wishes,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Piyush Bhatt
Top achievements
Rank 2
answered on 19 Dec 2011, 04:06 PM
Thanks for pointing me to this example. I am using Chrome Browser. and kpane.innerHeight() is returning NULL. following function is copied from the site suggested above (http://jsfiddle.net/dimodi/QZcH7/). function resizeTabs() {
var paneHeight = $("#tabStrip").closest(".k-pane").innerHeight();
var kpane = $("#tabStrip").closest(".k-pane");
alert(kpane); alert(kpane.innerHeight());
var tabsHeight = $("#tabStrip > .k-tabstrip-items").outerHeight();
$("#tabStrip > div").height(paneHeight - tabsHeight - 18);
}
0
Dimo
Telerik team
answered on 19 Dec 2011, 04:31 PM
Hi Piyush,

My demo works as expected in Chrome, so please compare the code with your implementation to see what's wrong.

All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Piyush Bhatt
Top achievements
Rank 2
answered on 19 Dec 2011, 06:18 PM
Dimo,

Thank you for your great support. I figured this out. I am not wrapping the tabs within splitter - that was the issue. 

Corrected the javascript to not use '.k-pane' and now it works. 

For benefit of otheres -- 

$(window).resize(function() {
resizeTabs();
});


function resizeTabs() {
   var parentHeight = $("#tabStrip").innerHeight();
   var tabTop = $("#tabStrip").position().top;
var tabsHeight = $("#tabStrip > .k-tabstrip-items").outerHeight();
//alert(parentHeight);
$("#tabStrip > div").height(parentHeight - tabsHeight - 18 - tabTop);
    }

Thanks,
Piyush Bhatt
0
Eric
Top achievements
Rank 1
answered on 08 May 2012, 09:27 PM
Dimo,

On your example solution, it appears that the resize event is happening before the window actually gets resized.  So, the value of the $("#tabstrip").closest(".k-pane").innerHeight() is actually the value BEFORE the resize occurs.

Try moving the top horizontal splitter a large amount, then a small amount, and then a large amount again.  You will notice the resizes are stale (one move previous).

Do you have a way to get resize events AFTER the user resize has been performed?

Thanks
0
Alex Gyoshev
Telerik team
answered on 09 May 2012, 07:01 AM
Hello Eric,

The layoutChange event is what you are looking for.

All the best,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Piyush Bhatt
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Piyush Bhatt
Top achievements
Rank 2
Eric
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or