Discussion :

[Walcure]

Bonjour à tous ,

Je suis actuellement en stage dans une entreprise, et je dois développer un site web.

J'utilise pour le site le composant jQuery UI dialog().

Donc comme expliquer dans le titre, j'ai deux soucis avec ce composant :

Le premier n'étant pas vraiment important, mais que je voudrais réglé tout de même au final est que les boutons de la fenêtre dialog sont inversés (La croix se trouve à gauche, et le boutons de "resizing" est également sur la gauche. Par contre la fenêtre change bien sa taille par le bas droite de la fenêtre. Ce problème étant sur tous les navigateurs.

Le deuxième soucis que j'ai rencontré uniquement sur Firefox, et que je veux réglé au plus vite, est que lorsque j'ouvre la fenêtre de dialog elle se place bien ou je veux, mais la fenêtre "modal" est complètement en haut de la fenêtre ... Et lorsque je veux déplacer la fenêtre (option draggable) la fenêtre de dialog se place au niveau de la fenêtre modal.

Voici une petit image pour vous montrer le problème rencontré. On voit sur l'image la fenêtre modal en haut ainsi que les boutons inversés :
Image

Et voici le code que j'utilise :

La page HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
    <div id="dialRename">
    	<div id="titreRename"></div>
        <div id="contenuRename"></div>
    </div>

Le code jQuery dans un fichier externe :

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
	$(".rename").click(function(){
		$('#dialRename').dialog({
			autoOpen : true,
			position : new Array('center',150),
			resizable : true,
			draggable : true,
			modal : true
 
			});
		}
	)
 
});

Pour l'instant il n'y a rien dans ma fenêtre dialog car j'ai rencontré le problème dès le début...

Je tiens aussi a préciser que j'utilise dans une autre page une fenêtre dialog ou les boutons sont également inversé, et la fenêtre modal décalée mais un peu moins haute. Mais dans cette page ça ne me pose pas de problème puisque je désactive la possibilité de fermeture, changement de taille et déplacement de la fenêtre.

J'ai déjà téléchargé à nouveau le plugin jQuery ui 1.8.21 mais ça n'a pas résolu mon problème

La version de Firefox exacte est : 13.0.1
La version de Chrome : 20.0.1132.57 m
La version de IE : 8.0.6001.18702

Je travaille sous l'environnement Windows XP SP3 (32 bits au cas ou quelqu'un ne sait pas qu'il n'y a pas eut de version 64 bits avec le SP3 )


Je vous remercie par avance du temps que vous me consacrerez.

Cordialement

Kévin

[Walcure]

J'ai trouvé la solution pour l'inversion des boutons.

J'avais appliqué le css

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
*{
left:0;
}

J'ai retiré cette ligne, et les boutons sont revenus comme par magie à leur place !

Par contre je n'ai toujours pas trouvé de solution pour la fenêtre modal

Tout ce que je peux ajouter, c'est que ça ne viens pas du zIndex, et que le code généré de la fenêtre modal est :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="ui-widget-overlay" style="width: 1280px; height: 8px; z-index: 1001;"></div>

Bien entendu quand j'augmente la propriété height avec firebug, la taille de la fenêtre augmente, et quand je supprime la propriété height, la taille se met correctement.

EDIT : J'ai trouvé une solution, j'ai ajouté la propriété CSS

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body{
height:98%;
}

Je n'ai pas compris pourquoi mon body sur firefox faisait 8px sur cette page et 20px sur l'autre...