Opened 14 years ago
Closed 10 years ago
#3635 closed bug (duplicate)
Resizable: Scrolling causes resizable element to jump around
| Reported by: | aeternitas103 | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 2.0.0 |
| Component: | ui.resizable | Version: | 1.6rc2 |
| Keywords: | scroll resize | Cc: | |
| Blocked by: | Blocking: |
Description
Hi,
I have a similar Problem like the Bug 3074. When i scroll to the right and Resize, the div jumps around.
When i delete the outer Div, like this, it works fine.
<div style="width: <?php echo $styleWidth; ?>; height: 800px; background-image: url('media/img/grid/grid.jpg');">
<div class="example dropMe" style="position: absolute; left: 25px; top: 31px; width: 25px; height: 30px; background-color: red;">
<a href="#">a</a>
</div>
<div class="example dropMe" style="position: absolute; left: 0px; top: 31px; width: 25px; height: 30px; background-color: green;">
</div>
</div>
Here my Code
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="js/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script src="js/jquery-1.2.6.js"></script>
<script src="js/ui/ui.core.js"></script>
<script src="js/ui/ui.dialog.js"></script>
<script src="js/ui/ui.resizable.js"></script>
<script src="js/ui/ui.draggable.js"></script>
<script src="js/ui/ui.droppable.js"></script>
<style>
</style>
<script>
$(document).ready(function()
{
$(".example").draggable
(
{
grid: [25,31],
opacity: 0.8
}
);
$(".example").resizable
(
{
handles: "e,w",
autoHide: true,
grid: [25,0],
minWidth: 25
}
);
$(".drop").droppable
(
{
accept: ".dropMe",
tolerance: "touch",
drop: function(ev, ui)
{
}
}
);
});
</script>
</head>
<body>
<div style="border: 1px silver solid; width: 100%; height: 400px; position: relative; left: 0px; top: 0px; overflow: auto;">
<div style="width: <?php echo $styleWidth; ?>; height: 800px; background-image: url('media/img/grid/grid.jpg');">
<div class="example dropMe" style="position: absolute; left: 25px; top: 31px; width: 25px; height: 30px; background-color: red;">
<a href="#">a</a>
</div>
<div class="example dropMe" style="position: absolute; left: 0px; top: 31px; width: 25px; height: 30px; background-color: green;"></div>
</div>
</div>
</body>
</html>
Change History (8)
comment:1 Changed 14 years ago by
| Milestone: | TBD → 1.6 |
|---|---|
| Priority: | minor → major |
comment:2 Changed 14 years ago by
| Milestone: | 1.7 → 1.8 |
|---|
comment:3 Changed 13 years ago by
comment:4 Changed 13 years ago by
I tried frankielaguna's solution and it works for me. (on Firefox 3.6.8 / Linux)
However I found that changing the line to this also works:
el.css({ position: 'absolute', top: el.position.top, left: el.position.left });
This appears to be more efficient.
comment:5 Changed 13 years ago by
Duplicate of #4166.
This seems a duplicate of the bug above. Since the other has higher priority I mark this one, although this was filed first.
comment:6 Changed 10 years ago by
| Milestone: | 1.9.0 → 2.0.0 |
|---|
comment:7 Changed 10 years ago by
| Status: | new → open |
|---|---|
| Summary: | ui.resizable - Scroll Jump Around → Resizable: Scrolling causes resizable element to jump around |
Confirmed this is still an issue in 1.9.1 - http://jsfiddle.net/tj_vantoll/wLrwt/.
comment:8 Changed 10 years ago by
| Resolution: | → duplicate |
|---|---|
| Status: | open → closed |
Note: See
TracTickets for help on using
tickets.
I was experiencing this issue and upon further investigation I found it was related to lines: 223 to 225 which is a bugfix for http://dev.jquery.com/ticket/1749.
To be more specific line 224: el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
The iniPos.top and iniPos.left which are called from this.element.position() are reporting the wrong positions.
If you replace iniPos.top and iniPos.left with parseInt(el.css('top')) and parseInt(el.css('left'))
The resizable functions as it should.
Hope this helps.