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

Window maximize

1 Answer 313 Views
Window
This is a migrated thread and some comments may be shown as answers.
Mohamed
Top achievements
Rank 1
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,

 

1 Answer, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 27 Jun 2016, 09:12 AM
Hi Mohamed,

Up to the issues
1. Please check the following forum thread which discusses the same case in details: 
http://www.telerik.com/forums/windows-center-when-in-splitter#EVuLBHsy1EehLhBoPsRHbA

2. This requirement is not supported out-of-the-box. As a workaround I would suggest manually setting width / height / position to the window when it is opened (dojo).

Regards,
Iliana Nikolova
Telerik
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Window
Asked by
Mohamed
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Share this question
or