Discussion :

[Chiffon56]

Bonjour,
Je découvre JQuery et les possibilité me semble assez extraordinaire. Cependant je bloque sur l'usage de resizable().

Voilà mon code html :

Code :

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

1
2
3
4
5
6
7
8
<div id="fenetre_gestion-conteneur">
   <div id="fenetre_gestion-entete">			
      <a href="#" id="fenetre_gestion-fermer">[ x ]</a>
      <span id="fenetre_gestion-titre"></span>
   </div>
   <div id="fenetre_gestion-contenu">
   </div>
</div>

Le code css:

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
 
#fenetre_gestion-conteneur
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	margin:auto;
	width:350px;	
	background-color:#f0f5FF;
	border: 1px solid #000;
	z-index: 50;
	overflow:hidden;
}
#fenetre_gestion-entete
{
	background-color:#5588bb;
	padding:2px;
	text-align:center;
	font-weight:bold;
	color: #FFFFFF;
	vertical-align:middle;
	cursor:move;
}
#fenetre_gestion-contenu
{
	padding:5px;
	height:100%;
	overflow:auto;
}
 
#fenetre_gestion-fermer
{
	float:right;
	text-decoration:none;
	color:#FFFFFF;
}

et enfin le code JQuery :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#fenetre_gestion-conteneur').draggable(
{
	zIndex: 	20,
	ghosting:	false,
	opacity: 	0.7,
	handle:	'#fenetre_gestion-entete'
}
).resizable(
{
	minHeight : 150, 
	minWidth: 150
 
});

Mon problème est le suivant : lorsque je souhaite redimensionner ma fenêtre, pourqu'elle soit plus petite, le bas de la barre de scroll est cachée sans que je comprenne pourquoi :
(avant redimensionnement)

(après redimensionnement, la barre de scroll apparaît bien, mais rognée en bas)


Quelqu'un peut-il m'aider ou me donner un tuyau pour contourner ce problème ?
Merci

[Macois]

Bonjour,

Voici ce que je propose :

Soit sur le css du bloc html d'id #fenetre_gestion-contenu tu mets un margin suffisant : margin:15px;
Ou l'option autoHide: true sur l'appel de la fonction resizable
Ou tu modifies la position du bouton de redimensionnement en modifiant ui.position
Ou autre chose...

A bientôt!

Macois.

[Chiffon56]

Merci pour cette réponse.

Cependant aucune des solutions ne fonctionne.
Rajouter une margin de 15px agrandi les marges de la div sans faire apparaître la partie rognée de la barre de scroll.
L'option autoHide cache effectivement l'icône, mais elle n'était pas vraiment en cause.
Pour la position de l'icône, elle est dans la feuille de style jquery-ui, quelque chose comme { position:absolute; bottom:0px; right:0px;} mais je ne sais pas comment améliorer ce positionnement pour éviter le problème et je me dis que j'ai du merdé quelque part sinon tout le monde aurait le même problème.


(voilà à quoi ça ressemble en autoHide avec volontairement margin:15px; )

Voilà d'ailleurs le code généré par jquery pour le conteneur entier.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="fenetre_gestion-conteneur" style="position: relative; display: block; opacity: 1; z-index: 50; left: -123px; top: -21px;" class="ui-draggable ui-resizable">
     <div id="fenetre_gestion-entete">			
          <a id="fenetre_gestion-fermer" href="#">[ x ]</a>
          <span id="fenetre_gestion-titre"></span>
     </div>
     <div id="fenetre_gestion-contenu">
     </div>
     <div class="ui-resizable-handle ui-resizable-e" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on" style="-moz-user-select: none;">
     </div>
     <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; -moz-user-select: none;" unselectable="on">
     </div>
</div>

mais même en recherchant à chaque étape du css jquery.ui je ne m'en sort pas.

Donc peut-être que j'ai mal utilisé cette fonction resizable, que je ne l'applique pas au bon endroit, ou que je ne spécifie pas assez de chose.
Mais même en fouillant la documentation je ne trouve pas comment améliorer mon code.

Peut-être qu'il faudrait faire une sorte de "pied" pour ce conteneur, dans lequel faire apparaître cette icône, mais je ne vois pas trop comment m'y prendre.