Kendo Ui Window resize issue within relative container

Question

I want to create a kendo ui window (KUI) widget that belongs within a container only. After searching around, it seems that the widget is not supported that way. So I try to mimic as close as I could by assigning position: relative; overflow: auto; to the container and here come the problem.

When I try to re-size the KUI, it's border does not align with the mouse position. It seems to be the margin between the container and the window viewport (20px in the snippet below).

My question is how can I make the margin go away or is there another approach to this.

$(function() {
      $("#myKendoUiWindow").kendoWindow({
        title: "myTitle",
        appendTo: "#container"
      });
    });

#container {
      margin: 20px;
      border: 1px solid #CCC;
      width: 300px;
      height: 300px;
      overflow: auto;
      position: relative;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.ui.core.min.js"></script>
    <link href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" />
    <div id="container">
      <div id="myKendoUiWindow"></div>
    </div>

Answer 1

Since this issue/limitation is a known one but isn't planed to be solved yet (thanks Lyubomir for the info), I think using jquery ui draggable, resizable is best work around for now.

$(function() {
  var $w = $("#myKendoUiWindow").kendoWindow({
    title: "myTitle",
    appendTo: "#container",
    resizable: false, // use jquery ui resizable
    draggable: false // use jquery ui draggable
  }).parent(); // kendoWindow wraps target element inside new one so we have to use parent

  $w.resizable().draggable({
    cancel: ".k-window-actions .k-icon" // cancel dragging on window buttons
  });

  // replace jquery ui 's resize icon with kendo ui's one
  $w.find(".ui-resizable-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se")
    .addClass("k-icon k-resize-se")
});

#container {
  margin: 20px;
  border: 1px solid #CCC;
  width: 300px;
  height: 300px;
  overflow: auto;
  position: relative;
}

<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.ui.core.min.js"></script>
<link href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" />
<div id="container">
  <div id="myKendoUiWindow"></div>
</div>

Answer 2

Window widgets always reside in the body tag, so that they always appear on top of everything else on the page. If you want to define some boundaries and force a Window to be draggable only there, you can use the widget's events, check the new coordinates on drag end and move the Window manually if the user drags it to an undesired location.

To get Window new coordinates, you can use jQuery offset().

Answer 3

We are experiencing the same issue with the Kendo Window. I have started a topic in Telerik's support forum which you can follow if you like, but they seem to think this is not a typical use case for the Window component.