IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Bug avec scroll, Resizable et Draggable ui!


Sujet :

jQuery

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    422
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 422
    Par défaut Bug avec scroll, Resizable et Draggable ui!
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    422
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 422
    Par défaut
    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...

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    422
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 422
    Par défaut
    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??

  5. #5
    Candidat au Club
    Profil pro
    Inscrit en
    Septembre 2009
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2009
    Messages : 3
    Par défaut
    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).

Discussions similaires

  1. Réponses: 2
    Dernier message: 26/02/2010, 12h20
  2. Bug avec le test de profondeur
    Par Tellmarch dans le forum OpenGL
    Réponses: 1
    Dernier message: 17/10/2004, 00h59
  3. Bug avec requete
    Par arsgunner dans le forum ASP
    Réponses: 8
    Dernier message: 14/06/2004, 16h25
  4. [C#] Bug (?) avec la propriété TransparencyKey de la Form
    Par FrigoAcide dans le forum Windows Forms
    Réponses: 5
    Dernier message: 21/05/2004, 14h14
  5. [CR9] Bug avec les champs à valeur vide ?
    Par Djob dans le forum SAP Crystal Reports
    Réponses: 3
    Dernier message: 15/07/2003, 21h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo