Bug with AppendTo

15 posts, 0 answers
  1. Jeff
    Jeff avatar
    14 posts
    Member since:
    May 2013

    Posted 27 Jun 2013 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 01 Jul 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jeff
    Jeff avatar
    14 posts
    Member since:
    May 2013

    Posted 01 Jul 2013 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 03 Jul 2013 Link to this post

    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!
  6. Richard
    Richard avatar
    10 posts
    Member since:
    Aug 2013

    Posted 30 Jan 2014 in reply to Dimo Link to this post

    Hi Dimo,

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

    Thanks,

    regards
    gg
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 31 Jan 2014 Link to this post

    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!
  8. Richard
    Richard avatar
    10 posts
    Member since:
    Aug 2013

    Posted 31 Jan 2014 in reply to Dimo Link to this post

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

    Posted 31 Jan 2014 Link to this post

    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!
  10. Richard
    Richard avatar
    10 posts
    Member since:
    Aug 2013

    Posted 31 Jan 2014 in reply to Dimo Link to this post

    Alright. I'll just link it to this discussion thread then. Thanks,
  11. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 20 Apr 2015 Link to this post

    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.

  12. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Apr 2015 Link to this post

    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.

  13. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 21 Apr 2015 in reply to Dimo Link to this post

    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.

  14. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 22 Apr 2015 Link to this post

    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

  15. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 22 Apr 2015 Link to this post

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

  16. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 23 Apr 2015 Link to this post

    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.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready