Search code examples
javascripthtmlcssjquery-uijquery-ui-resizable

jqueryUI: draggable handles are hidden at top of div

This might be a bug but I have no idea what I'm doing wrong.

I went to the trouble of making a JS Fiddle and sadly it's behaving fine there, but if you take the exact code and run it locally in chrome, the jqUI handles are all sitting at the top of the element instead of the outer edges? Here's the fiddle: https://jsfiddle.net/ceL1j3kL

For sanity sake, I'm including a screen image of this behavior when I run it locally.

Does anyone know how to keep the handles in place when dynamically creating elements that are going to utilize the handles?

Heres the full source I'm working with:

html

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="/style/chat.css" type="text/css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="/scripts/test.js"></script>
    </head>
    <body>
    </body>
</html>

css

html, 
body {
    height: 100%;
    overflow: hidden;
    margin:0;
    padding:0;
}

js

$(document).ready(function(){
    let c = $('<div id="container" style="width: 75%; height: 75%; background-color: black;">');
    c.appendTo($('body'));
    c.draggable({
        containment: 'body'
    });
    c.resizable({
        handles: 'all'
    });
});

image of the behavior i'm seeing when running locally. you can see i'm hovering in the image over the south handle, which is at the north of the element and is not clickable.... behavior

Solution

  • You have to add jquery-ui.css reference in your project, for example:

    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">