Bug with AppendTo

[Jeff]

Hi all,

I'd like to report what I believe is a bug with the Window. When including the AppendTo method in a Window declaration, the Window will not resize properly if the element that is appended to is absolutely positioned with a top/bottom/left/right position.

Example case (untested, but taken from code where the bug was occurring):
View (Razor):

<div id="myDiv"></div>
@(Html.Kendo().Window()
    .Draggable(true)
    .Resizable()
    .Width(300)
    .Name("myWindow")
    .AppendTo("myDiv")
    .Content("some content here")
    .Visible(false))
<button id="myBtn" onclick="showWindow();">Show</button>

CSS:

<style>
    #myDiv {
        position: absolute;
        top: 200px;
        right: 200px;
    }
</style>

Javascript:

<script>
    function showWindow() {
        var window = $("#myWindow").data("kendoWindow");
        window.open();
    }
</script>

Thanks,
Jeff

[Dimo]

Hi Jeff,

The problem is caused by the fact that #myDiv does not have set dimensions. In this case it will not expand as much as expected and the Window will appear at the wrong place, although it is exactly where it should. The following example demonstrates what I mean.

http://jsfiddle.net/dimodi/7Tmgf/

Regards,
Dimo
Telerik

[Jeff]

Dimo,

Thanks for your reply, but the jsFiddle you provided demonstrates the bug I am describing, even on the window appended to a container with fixed dimensions. The bug is with resizing the window, not displaying it.

 Jeff

Edit: Just wanted to note that this bug is not currently affecting me. I worked around it by wrapping the window in the container I am absolutely positioning, rather than appending it to it. I simply wanted to bring the bug to your attention. There does not appear to be documentation for AppendTo on the website anymore.

[Dimo]

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

[Kevin]

Hi Dimo,

We're running  into the same problem. Was this bug resolved?

Thanks,

regards
gg

[Dimo]

Hi Richard,

I am afraid the issue still exists. We will try to resolve by Q1 2014.

Regards,
Dimo
Telerik

[Kevin]

Thanks Dimo. Could you provide me with an associated ticket number? I need to track this issue on our end. 

[Dimo]

Hello Richard,

Our bug tracking system is private. I will post in this thread when there is some progress on the discussed issue.

Regards,
Dimo
Telerik

[Kevin]

Alright. I'll just link it to this discussion thread then. Thanks,

[Oscar]

It seems this bug is not fixed yet in Q1 2015.

Try to resize the kendo window vertically dragging its bottom border upwards to make the window smaller.

http://dojo.telerik.com/IfaBU

Kind regards,

Oscar.

[Dimo]

Hello Oscar,

Yes, the issue still exists, sorry about that. We have been working on tasks with higher priority.

Regards,
Dimo
Telerik

[Oscar]

Hi Dimo,

The application I'm working on is a kind of UI Designer. The user can drag & drop controls from a toolbox to the design area. Later, the user sets  the size's control stretching its borders. Resizing controls has to be easy and accurate for the user. This is why resizable windows have a high priority for our company.

Kind regards,

Oscar.

[Oscar]

Hi again Dimo,

In my example, if you press up or down arrow key to move the window, you'll see it doesn't work as expected.
However, it does resize the window well if you use for ctrl + up arrow key or ctrl + down arrow key.

Kind regards
Oscar

[Oscar]

Hi Kendo Team,

It seems like setting wrapper.position() as top and left instead of offset fixes the problem for keyboard navigation.

I hope this helps.

if (options.draggable && !e.ctrlKey && !isMaximized) {
    // 20150422
    //offset = kendo.getOffset(wrapper);

    //if (keyCode == keys.UP) {
    //    handled = wrapper.css("top", offset.top - distance);
    //} else if (keyCode == keys.DOWN) {
    //    handled = wrapper.css("top", offset.top + distance);
    //} else if (keyCode == keys.LEFT) {
    //    handled = wrapper.css("left", offset.left - distance);
    //} else if (keyCode == keys.RIGHT) {
    //    handled = wrapper.css("left", offset.left + distance);
    //}


    if (keyCode == keys.UP) {
       handled = wrapper.css("top", wrapper.position().top - distance);
    } else if (keyCode == keys.DOWN) {
       handled = wrapper.css("top", wrapper.position().top + distance);
    } else if (keyCode == keys.LEFT) {
       handled = wrapper.css("left", wrapper.position().left - distance);
    } else if (keyCode == keys.RIGHT) {
       handled = wrapper.css("left", wrapper.position().left + distance);
    }
}

[Dimo]

Hello Oscar,

I am not sure this will work in all scenarios, but thanks for sharing your observation, we will take it into account.

Regards,
Dimo
Telerik