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

Window resizing issue when in container

9 Answers 746 Views
Window
This is a migrated thread and some comments may be shown as answers.
zhivko.zhelezov
Top achievements
Rank 1
zhivko.zhelezov asked on 18 Feb 2016, 11:00 AM

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.

 

9 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 23 Feb 2016, 07:43 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sysadmins
Top achievements
Rank 1
answered on 29 Feb 2016, 09:52 AM

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.

0
zhivko.zhelezov
Top achievements
Rank 1
answered on 02 Mar 2016, 08:22 AM

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

0
Dimo
Telerik team
answered on 02 Mar 2016, 02:06 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
tlaguz
Top achievements
Rank 1
answered on 10 Apr 2017, 10:00 AM

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

0
Dimo
Telerik team
answered on 11 Apr 2017, 11:56 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Misho
Telerik team
answered on 15 May 2017, 11:14 AM
Hi,

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

Best Regards,
Misho
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Anthony
Top achievements
Rank 1
answered on 15 Aug 2018, 08:38 AM

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

0
Joana
Telerik team
answered on 17 Aug 2018, 05:57 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Window
Asked by
zhivko.zhelezov
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Sysadmins
Top achievements
Rank 1
zhivko.zhelezov
Top achievements
Rank 1
Dimo
Telerik team
tlaguz
Top achievements
Rank 1
Misho
Telerik team
Anthony
Top achievements
Rank 1
Joana
Telerik team
Share this question
or