Window maximize

2 posts, 0 answers
  1. Mohamed
    Mohamed avatar
    13 posts
    Member since:
    May 2015

    Posted 23 Jun Link to this post

    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,

     

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 27 Jun Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top