Bug in jQuery UI draggable

Question

I don't know how to solve it but look at this: enter image description here

When I pull to the right or down, then there are scrollbars. Here is code:

$(this).draggable({
    stack: ".window",
    containment: "document",
    scroll: false,
...

HTML code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Inteli Mirgo windows</title>
    <link rel="stylesheet" type="text/css" href="styles/default/style.css" media="all" />
    <link rel="stylesheet" type="text/css" href="styles/default/mirgo.css" media="all" />
    <link rel="stylesheet" href="styles/default/jquery.ui.all.css">
    <script src="scripts/jquery-1.6.2.js"></script>
    <script src="scripts/jquery.ui.core.js"></script>
    <script src="scripts/jquery.ui.widget.js"></script>
    <script src="scripts/jquery.ui.mouse.js"></script>
    <script src="scripts/jquery.ui.draggable.js"></script>
    <script src="scripts/jquery.ui.resizable.js"></script>
    <script src="scripts/jquery.ui.droppable.js"></script>
    <script src="scripts/default/mirgo.js"></script>
</head>
<body>
    <div class="window optionResizable" style="width: 300px; height: 200px; left: 150px; top: 160px;">
        <div class="titleWindow">
            Window #1
        </div>
        <div class="bodyWindow">
            Content of window #1
        </div>
    </div>
    <div class="window optionResizable" style="width: 200px; height: 100px; left: 300px; top: 140px;">
        <div class="titleWindow">
            Window #2
        </div>
        <div class="bodyWindow">
            Content of window #2
        </div>
    </div>
    <div class="window optionResizable" style="width: 500px; height: 500px; left: 600px; top: 20px;">
        <div class="titleWindow">
            Window #3
        </div>
        <div class="bodyWindow">
            Content of window #3
        </div>
    </div>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
}
body {
    background: url('images/bg.png');
    font-family: sans-serif;
    font-size: 13px;
}
.window {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    position: absolute !important;
    border: 1px solid #CFCFCF;
    -webkit-box-shadow: 1px 1px 5px 0px #BBBBBB;
    -moz-box-shadow: 1px 1px 5px 0px #BBBBBB;
    box-shadow: 1px 1px 5px 0px #BBBBBB;
}
...

I don't know why it so, how I can solve this problem?

P.S. I tried to use containment: "body" but in firefox it doesn't works.

I added new div <div id="wow">test</div> which is standard div without any css and changed JS to: $('#wow').draggable({stack: "#wow",containment: "document",scroll: false}); and same effect! Scrollbars again :(

Toss a a generic div in there and contain within that...see what happens. — Jack
– Jack, Commented Oct 26, 2011 at 16:35

yunzen · Accepted Answer · 2011-10-26 16:40:02Z

2

That's not the problem of jQuery UI, it's CSS

Try this:

body{
overflow: hidden;
}

answered Oct 26, 2011 at 16:40

yunzen

33.5k13 gold badges79 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dom Over a year ago

Brilliant! How'd you figure that out?? It was driving me insane, I eventually ended up using containment: html. Thank you!

Collectives™ on Stack Overflow

Bug in jQuery UI draggable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related