Bug avec scroll, Resizable et Draggable ui!

Version imprimable

Bonjour

je rencontre un bug bizarre:

j'ai un div en overflow:auto, à l'interieur, j'ai un div qui est resizable.
Et bien lorsque je scroll mon div et qu'ensuite, je tente de "resizer" mon div resizable et bien celui-ci fait des "sauts" et se décale!

Voici un exemple pour appuyer ce je dis :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html lang="en">
<head>
	<title>jQuery UI Resizable - Default functionality</title>
	<link type="text/css" href="http://jqueryui.com/themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="http://jqueryui.com/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.core.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.draggable.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/ui/ui.resizable.js"></script>
 
	<link type="text/css" href="http://jqueryui.com/ui/demos.css" rel="stylesheet" />
	<style type="text/css">
	#resizable { width: 150px; height: 150px; padding: 0.5em; }
	#resizable h3 { text-align: center; margin: 0; }
	</style>
	<script type="text/javascript">
	$(function() {
		$("#resizable").draggable({
		   containment: 'parent', 
		   scroll: false
		});
 
		$("#resizable").resizable();
	});
	</script>
</head>
<body>
<div style="border:1px solid black; max-height:300px; max-width:300px; overflow:auto; position:relative;">
	<div style="height:400px; width:400px;">
		<div id="resizable" class="ui-widget-content">
			<h3 class="ui-widget-header">Resizable</h3>
		</div>
	</div>
</div>
 
</body>
</html>

Avez-vous déjà rencontrer ce bug?

Auriez-vous une solution à ce problème?

Merci par avance:)

Bonsoir.

Je crois que ces « sauts » sont dus aux contraintes en sens divers imposées par les CSS et les divisions imbriquées.

Voici un exemple qui fonctionne sous C3, F3 et IE8.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* TEST */
		div#conteneur {
			width:500px;
			height:500px;
			overflow:hidden;
			border:1px solid black;
		}
		div#resizable {
			width: 150px;
			height: 150px;
			padding: 0.5em;
		}
		div#resizable h3 {
			text-align: center;
			margin: 0;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#resizable").draggable({
				 containment: 'parent',
				 scroll: false
			}).resizable({
				containment: 'parent',
				minHeight: 100,
				minWidth: 100,
				maxHeight: 350,
				maxWidth: 350
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="resizable" class="ui-widget-content">
			<h3 class="ui-widget-header">Resizable</h3>
		</div>
	</div>
</body>
</html>

26/09/2009, 22h34
benthebest

Merci pour ta réponse

Le problème est que j'ai besoin que le div conteneur soit scrollable. Or dans l'exemple que tu met, il ne l'est pas... :?
27/09/2009, 00h36
benthebest

Je viens de trouver quelque chose d'interessant.

Apparement, il s'agit d'un bug dans ui.resizable.js :
http://dev.jqueryui.com/ticket/3074

et un certain "oggy" fourni un patch :
http://dev.jqueryui.com/attachment/t...ble_3074.patch

Le problème, c'est que j'ai réessayé sur mon exemple cité plus haut, mais cela ne fonctionne toujours pas ?!?!

Quelqu'un aurai t-il une idée??
27/10/2009, 18h25
olouv

As-tu des styles css appliqués à ton élément html ? J'ai eu ce genre de problème de décalage en utilisant draggable quand j'avais en css html { height:100% } (mettre height:100%; sur la balise body résout le problème).