bug bizarre avec jquery ui redimensionnable

Je joue avec jquery UI et j'ai remarqué un bug bizarre. Lorsque je clique sur un bouton qui redimensionne un div, le div se place en dessous de ce bouton.bug bizarre avec jquery ui redimensionnable

resizable.html:

<html> 
    <head> 
     <link href="my.css" rel="stylesheet" type="text/css"/> 
     <link href="jquery-ui.css" rel="stylesheet" type="text/css"/> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="jquery-ui.js"></script> 
     <script> 
     function makeResizable() { 
      $("#divRes").resizable(); 
     } 
     </script> 
     <style> 
     </style> 
</head> 
<body> 
     <br><br><br><br><br><br><br><br><br><br> 
     <button onclick="makeResizable();">Make Resizable</button> 
     <div id="divRes" class="MyDiv"></div> 
</body> 
</html>

my.css:

.MyDiv { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
    height: 100px; 
    width: 100px; 
    padding: 0px; 
    margin: 0px; 
    z-index: 1; 
    background-color: cyan; 
}

Alors dès que je clique sur le bouton faire redimensionnable, la div devient redimensionnable, mais il se déplace également verticalement en dessous du bouton.

La partie bizarre est la suivante: si je retire le css de my.css et la place en ligne entre le

<style> 
.MyDiv { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
    height: 100px; 
    width: 100px; 
    padding: 0px; 
    margin: 0px; 
    z-index: 1; 
    background-color: cyan; 
} 
</style>

OU si je change la déclaration de la div de:

<div id="divRes" class="MyDiv"></div>

<div id="divRes"></div>

et my.css à

#divRes { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
    height: 100px; 
    width: 100px; 
    padding: 0px; 
    margin: 0px; 
    z-index: 1; 
    background-color: cyan; 
}

LE PROBLÈME NE SE PRODUIT PAS. Mais, bien sûr, faire cela est à la fois indésirable et stupide. Le problème ne peut pas être reproduit dans jsfiddle car évidemment tout css est en ligne. Je peux télécharger les fichiers en ligne dans les deux versions si nécessaire.

versions jquery:

jQuery UI - v1.8.20 - 2012-04-30

jQuery v1.7.2 jquery.com | jquery.org/license

Merci d'avance pour toute contribution.

EDIT: juste testé avec jquery-ui 1.30.3 et jquery 1.9.1 (plus tard). le problème persiste, donc ce n'est pas dû à une ancienne version de celui-ci.

EDIT2: J'ai téléchargé les fichiers ici http://speedy.sh/eBPea/resizable.zip

resizable.htm: montre le problème

resizable2.htm: le problème ne semble pas si je ne pas utiliser les classes CSS (non une option)

redimensionnable3.htm: le problème ne semble pas si j'inclure des classes CSS dans le fichier html (pas une option)

Source

2013-07-23 MIrrorMirror

Sans lapalissade, mais avez-vous une déclaration 'de DOCTYPE' dans votre fichier HTML? Votre exemple de code ici est manquant. – Uooo

vous devriez être en mesure de recréer dans http://jsfiddle.net/ il suffit de placer les URL pour vos fichiers CSS et les fichiers JS dans les ressources externes – apaul

Il semble que ce soit un problème avec le CSS.

Le plugin redimensionnable ajouter la classe ui-resizable à votre élément et il est livré avec ce style par défaut dans l'interface utilisateur jQuery:

.ui-resizable { 
    position: relative; 
}

Cela provoque des problèmes que votre CSS a position: absolute et est surchargée. Pour éviter ce problème ajouter cette règle à votre fichier CSS:

.MyDiv.ui-resizable { 
    position: absolute; 
}

ou de faire modifier la définition de .MyDiv comme:

.MyDiv { 
    position: absolute !important; 
}

Source

2013-08-07 12:34:26

Semble raisonnable. '.ui-resizable' et' .MyDiv' ont la même spécificité, donc l'ordre de déclaration décide du gagnant. Puisque 'jquery-ui.css' est ajouté * après *' my.css', '.ui-resizable' vient * après *' .MyDiv' et gagne donc, résultant en un positionnement relatif. '.MyDiv' gagne si la déclaration de style est placée (inline) après' jquery-ui.css' (ordre de déclaration) ou si la règle utilise un ID au lieu d'une classe (spécificité plus élevée). –

Il devrait fonctionner comme vous pouvez le voir dans ce jsFiddle:

HTML

<button id="resizeBtn">Make Resizable</button> 
<div id="divRes" class="MyDiv"></div>

$('#resizeBtn').click(function() {  
    $("#divRes").resizable(); 
});

CSS

.MyDiv { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
    height: 100px; 
    width: 100px; 
    padding: 0px; 
    margin: 0px; 
    z-index: 1; 
    background-color: cyan; 
}

http://jsfiddle.net/GfczQ/

Source

2013-07-23 20:54:10

le problème ne peut pas être répliqué dans jsfiddle, uniquement avec des fichiers réels. – MIrrorMirror

+1 pour la valeur et passer du temps sur la requête – Akki619

J'ai eu le même problème. Aucune des réponses n'a fonctionné pour moi.

La largeur de ma div a commencé à 200px et lorsque j'ai déplacé la souris pour la redimensionner à partir de l'est, la largeur est immédiatement descendue à 170px. Je tracé le problème aux lignes 302 et 303 dans resizable.js un changé el.width() à el.outerWidth()

Lines:

this.size = this._helper ? { width: this.helper.width(), height: this.helper.height() } : { width: el.outerWidth(), height: el.height() }; 
this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.outerWidth(), height: el.height() };

Source

2015-07-02 01:17:34 DanielRavina

bug bizarre avec jquery ui redimensionnable

Répondre

Questions connexes