Window resizing issue when in container

[zhivko.zhelezov]

Hi, we are developing a component where we use many Kendo UI Window instances. They are all placed in a container that is not the "body" element. This container is relative to other elements and has offsets from the "body".

When trying to resize a window, the resizing border does not align with the mouse position, it seems to shrink down with the size of the offset from the body.

Here is a small demo, reproducing the issue: http://jsbin.com/jivemitavi/edit?html,css,js,output

If you set a 'top' or 'left' on the container, the behavior changes and the window even moves its position when resizing.

Is there a workaround to this or is there something we're missing?

Thanks.

 

[Ivan Zhekov]

Hi, Zhivko.

The window is meant to be top-level element, ideally not placed inside any container, or if placed, the container should not have padding, border or margins.

Looking at the code in question: https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.window.js#L1329-L1358, you can see that the new width / height is calculated as the greater of the two distances (document edge, container edge). That's why in the beginning the window is correct in size and then "jumps" to the expected size + the pixels from the container edge to the document edge.

Is it paramount that the windows are placed inside a container with padding / margin?

Regards,
Ivan Zhekov
Telerik

 

 

[Sysadmins]

Hello Ivan, 

We are experiencing the same issues when using appendTo and the problem seems to date back 3 years with "promises" that it will be resolved :

[quote]Dimo said:Hello Jeff,

Sorry about the misuderstanding, now I see what you mean.

It seems the problem is not trivial to resolve, so I have logged it in our bug tracking system for future fixing. Your Telerik points have been updated.

Regards,
Dimo 
Telerik
[/quote]

These bugs make the appendTo option useless although a great and much needed feature for rich dynamic interfaces.
Example

 
Checking the example below you will also see another two bugs:
1. Trying to drag "window2" while scrolled to the bottom/less corner of the container, the offset calculation makes the window jump out of view immediately to the container's top/left relative position and not that of the scrolled offset
2. Closing down "window2" and trying to move "window1", makes the scrolling disappear immediately and moves window to top/left most side of the container

Is there any ETA or possible workaround for these problems? In our case we have DevCraft Complete license, would it be the same to use a modified version of the open source kendo core, fixing the window with appendTo issues?

Regards,
Kypros.

[zhivko.zhelezov]

Hi Ivan,

Yes, it is necessary for us to use the windows in this specific context. We are experimenting with other options such as jQuery Dialog.

Regards

[Dimo]

Hello,

I confirm that the discussed problem is a known one, however, it has not made it in our development plans due to low priority. Sorry about that.

On the other hand, in order to address Angular-related issues, we intend to research the possibility to use only the "appendTo" mode of the widget in the new Angular 2 - compliant Kendo UI version. If successful, this will resolve the current limitation.

Regards,
Dimo
Telerik

[tlaguz]

Hi,

we are experiencing this issue too.
Kendo is full of small bugs, which we must patch. Another example: https://github.com/telerik/kendo-ui-core/issues/2364

Is this really worth 1000$ per developer? I don't think so.

Tomasz

[Dimo]

Hello Tomasz,

I understand your frustration and agree that this bug has been open long enough. I have raised the priority of the resizing issue, escalated it to the product team and asked them to include it in their short-term to-do list.

https://github.com/telerik/kendo-ui-core/issues/245

Regards,
Dimo
Telerik by Progress

[Misho]

Hi,

The issue has been resolved and the fix will be available in R2 2017 SP1.

Best Regards,
Misho
Telerik by Progress

[Anthony]

Hi. I just experienced the same or a very similar issue (v2018.2.516). As you try to resize the window the window is offset by (in our case) 100px

I can't reproduce via a standalone example, however the fix in our case was to apply a margin-left of 1px to the container that holds the window, this made the -vertical-resizing work

The reason is because of code in kendoWindow.js,  WindowResizing.prototype, dragstart (line 1122). 'hasMargin' checks for the existence of left or top margin and if either is present it does some extra calculations which fixes the issue

This may purely be specific to our code but reporting here in case it helps anyone else

[Joana]

Hi Anthony,

Thank you for digging into the issue.

Indeed, there are numerous scenarios regarding positioning, resizing and dragging of Window within a container. However, we will be able to diagnose the issue only if we had the configuration of the widget and its container. 

Let me know if we could assist you further.

Regards,
Joana
Progress Telerik