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

Bug with AppendTo

14 Answers 124 Views
Window
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 27 Jun 2013, 07:00 PM
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

14 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 01 Jul 2013, 12:33 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeff
Top achievements
Rank 1
answered on 01 Jul 2013, 02:38 PM
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.
0
Dimo
Telerik team
answered on 03 Jul 2013, 01:51 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Richard
Top achievements
Rank 1
answered on 30 Jan 2014, 11:58 PM
Hi Dimo,

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

Thanks,

regards
gg
0
Dimo
Telerik team
answered on 31 Jan 2014, 07:24 AM
Hi Richard,

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

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Richard
Top achievements
Rank 1
answered on 31 Jan 2014, 01:37 PM
Thanks Dimo. Could you provide me with an associated ticket number? I need to track this issue on our end. 
0
Dimo
Telerik team
answered on 31 Jan 2014, 02:20 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Richard
Top achievements
Rank 1
answered on 31 Jan 2014, 05:59 PM
Alright. I'll just link it to this discussion thread then. Thanks,
0
Oscar
Top achievements
Rank 1
answered on 20 Apr 2015, 04:24 PM

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.

0
Dimo
Telerik team
answered on 21 Apr 2015, 08:37 AM
Hello Oscar,

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

Regards,
Dimo
Telerik

See What's Next in App Development. Register for TelerikNEXT.

0
Oscar
Top achievements
Rank 1
answered on 21 Apr 2015, 09:16 AM

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.

0
Oscar
Top achievements
Rank 1
answered on 22 Apr 2015, 02:33 PM

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

0
Oscar
Top achievements
Rank 1
answered on 22 Apr 2015, 04:21 PM

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);
    }
}

0
Dimo
Telerik team
answered on 23 Apr 2015, 11:32 AM
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

See What's Next in App Development. Register for TelerikNEXT.

Tags
Window
Asked by
Jeff
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jeff
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Oscar
Top achievements
Rank 1
Share this question
or