Décalage du bloc lors de la programmation d'un resize avec jquery ui
Salut,
Lorsque l'on veut programmer un bloc pour qu'il puisse se redimensionner si besoin (donc lorsque la fonction "resizable" est ajoutée dynamiquement), faire bien attention aux propriétés de la classe "ui-resizable" qui sera ajoutée par jquery .
En effet dans mon cas les blocs étaient positionnés en absolu (impératif) mais il perdaient cette propriété dès l'instanciation de la fonction "resizable" puisque "ui-resizable" est positionnée en relatif dans le css de jquey. Il m'a fallu un bon moment pour trouver l'origine du petit décalage du bloc qui se produisait sans que j'en comprenne la cause.
Donc la solution est soit de faire le positionnement des blocs avec un style absolu embarqué dans le html (il aura ainsi la priorité sur l'application d'une classe externe) soit de cibler plus précisément les blocs en css pour que le style appliqué garde la priorité. Par exemple :
Code:
1
2
3
4
5
6
| .content .bloc {
position:absolute;
}
.ui-resizable {
position:relative;
} |
Code:
<div class = "content"><div class = "bloc ui-resizable">mon bloc</div></div>
Notez que quand une classe est ajoutée dynamiquement après la création du bloc, l'ordre d'affichage des définitions des classes dans le css ne change rien, c'est uniquement le ciblage css qui permet d'affirmer la priorité. En d'autres termes :
Code:
1
2
3
4
5
6
| .ui-resizable {
position:relative;
}
.bloc {
position:absolute;
} |
ne fonctionnera pas.
(alternativement on pourrait aussi utiliser l'exception css !important pour figer le css de positionnement mais dans ce cas il sera plus difficile de le modifier par la suite si besoin)
Voilà j'ai passé pas mal de temps pour trouver l'origine de ce problème car c'est la première fois que je rencontre ce cas de figure après de nombreuses années d'utilisation... bah donc je comprenais plus rien :roll:
Si cela peut faire gagner un peu de temps à certains ;)
