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

Resize browser window resize splitter layout ?

4 Answers 609 Views

Splitter

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

n asked on 13 Sep 2011, 02:37 PM

the-css-file.jpg

my-css-file.png

Im trying to get a splitter layout to refresh and resize when I resize the browser window.

Im have manged to get the layout to stretch 100 % both width wise and height so the only thing I cant work out is what to do inside my jqeury "$(window).resize(function() " so that the hole splitter layout to refresh and resize ???

Best Regards
Nicklas

01.<!doctype html>

02.<html>

03. <head>

04. <title>Basic usage</title>

05. <link href="_includes/css/base.css" rel="stylesheet"/>

06. <link href="_includes/css/kendo.common.min.css" rel="stylesheet"/>

07. <link href="_includes/css/kendo.kendo.min.css" rel="stylesheet"/>

08. <script src="_includes/js/jquery.1.6.2.min.js"></script>

09. <script src="_includes/js/kendo.all.min.js"></script>

10. </head>

11. <body>

12. <div id="splitter" >

13. <div id="vertical">

14. <div id="top">

15. <p>

16. Outer splitter : top pane

17. </p>

18. </div>

19. <div>

20. <div id="horizontal">

21. <div id="left">

22. <p>

23. Inner splitter :: left pane

24. </p>

25. </div>

26. <div id="center">

27. <p>

28. Inner splitter :: center pane

29. </p>

30. </div>

31. <div id="right">

32. <p>

33. Inner splitter :: right pane

34. </p>

35. </div>

36. </div>

37. </div>

38. <div id="bottom">

39. <p>

40. Outer splitter : bottom pane

41. </p>

42. </div>

43. </div>

44.

45. <script type="text/javascript">

46. $(document).ready(function()

47. {

48. $("#splitter #vertical").height($(window).height() - 2)

49.

50. function onResize(e)

51. {

52. console.log("Resized :: Splitter #" + this.element[0].id);

53. console.log(this.element[0]);

54. };

55.

56. $("#vertical").kendoSplitter({

57. orientation: "vertical",

58. panes: [

59. { collapsible: true, size: "30%" }, // top height

60. { collapsible: false, size: "40%" },

61. { collapsible: true, size: "30%" } // bottom height

62. ],

63. resize: onResize

64. });

65.

66. $("#horizontal").kendoSplitter({

67. panes: [

68. { collapsible: true, size: "20%" }, // left height

69. { collapsible: false, size: "60%" }, // center

70. { collapsible: true, size: "20%" } // right height

71. ],

72. resize: onResize

73. });

74.

75. $(window).resize(function()

76. {

77. // what do i put here to force resize refresh of all splitters ???

78. });

79. });

80. </script>

81. </div>

82. </body>

83.</html>

4 Answers, 1 is accepted

answered on 13 Sep 2011, 03:29 PM

screenshot.png

It dosent work ?

Oki I modified my example a bit by cutting of the "fat" see the code bellow. I tried setting 100% via css but it just dosent work "see attached screenshot" when I resize browser (firefox 5.0) splitter layout is static both in width and height so any other suggestions are appreciated ?

<!doctype html>

<html>

<head>

<title>Basic usage</title>

<link href="_includes/css/kendo.common.min.css" rel="stylesheet"/>

<link href="_includes/css/kendo.kendo.min.css" rel="stylesheet"/>

<script src="_includes/js/jquery.1.6.2.min.js"></script>

<script src="_includes/js/kendo.all.min.js"></script>

<style type="text/css">

html, body

{

margin:0 0 0 0 !important;

padding:0 0 0 0 !important;

width: 100%;

height: 100%;

overflow: hidden;

}

#splitter

{

margin: 0 0 0 0;

padding: 0 0 0 0;

width: 100%;

height: 100%;

}

#splitter #vertical

{

width: 100%;

height: 100%;

}

#splitter #horizontal

{

width: 100%;

height: 100%;

border: 0;

overflow:hidden;

}

</style>

</head>

<body>

<div id="splitter" >

<div id="vertical">

<div>

<p>

Outer splitter : top pane

</p>

</div>

<div>

<div id="horizontal">

<div>

<p>

Inner splitter :: left pane

</p>

</div>

<div>

<p>

Inner splitter :: center pane

</p>

</div>

<div>

<p>

Inner splitter :: right pane

</p>

</div>

<div>

<p>

Outer splitter : bottom pane

</p>

</div>

<script type="text/javascript">

$(document).ready(function()

{

$("#vertical").kendoSplitter({

orientation: "vertical",

panes: [

{ collapsible: true }, // top height

{ collapsible: false },

{ collapsible: true } // bottom height

]

});

$("#horizontal").kendoSplitter({

panes: [

{ collapsible: true}, // left height

{ collapsible: false }, // center

{ collapsible: true } // right height

]

});

</script>

</div>

</body>

</html>

answered on 14 Sep 2011, 09:24 AM

KendoUI-2011-2-826.zip

Hello Nicklas,

Actually, the discussed functionality has been implemented after the Kendo release. You can try using the scripts and styles from the attached build.

Alternatively, you can subscribe to window.resize and execute the following Javascript:

$("#vertical").data("kendoSplitter").trigger("resize")

Regards,
Dimo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!