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

Window maximize

1 Answer 460 Views

Window

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

Mohamed asked on 23 Jun 2016, 04:08 PM

Greetings,

I have two issues here:

1. when the window is open, it's not properly centered in the expected region, how can I get it to be in the center of the appended div?

2. When I maximize the window, it covers everything, how can I limit it to that same region?

Here is a code snippet:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>
<body>
<div id="vertical" >
<div></div>
<div id="horizontal" >
<div id="menusection"></div>
<div id="mainContent">
<div id="dialog"></div>
</div>
</div>
<div></div>
</div>
<script>
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: true, size: "5%" }, // height
{ collapsible: false, size: "90%" },
{ collapsible: true, size: "5%" }
]
});

$("#horizontal").kendoSplitter({
panes: [
{ collapsible: false, resizable: false, size: "15%" }, // menu
{ collapsible: false, resizable: false, size: "85%" },
]
});
$("#dialog").kendoWindow({
appendTo: "div#mainContent",
actions: [
//"Pin",
"Minimize",
"Maximize",
"Close"
]
}).center().open();
//var dialog = $("#dialog").data("kendoWindow");
//dialog.center();
// chaining example
// dialog.center().open();
</script>
</body>
</html>

Thanks,

Window maximize

1 Answer, 1 is accepted