Discussion :

[picwic]

Bonsoir,

J'ai développé un autocompleter maison (une liste de suggestions apparait au premier plan quand on écrit dans un champ INPUT) que j'utilise conjointement avec Scriptaculous pour réorganiser des DIVs à la sauce drag'n'drop (Sortable.create, Sortable.destroy).
Lorsque je déplace un DIV lequel contient ces INPUTs, il arrive que les listes ne soient pas toujours au premier plan et se retrouvent en partie recouverte par le DIV du dessous.

Il semble que le problème vienne de Scriptaculous qui manipule le z-index de l'élément déplacé lors du drag'n'drop en le positionnant à 1000. Même en fixant le z-index des listes à une valeur supérieure (1500 par ex.), ça ne résout rien.

Voici le CSS que j'applique aux listes :

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
 
.suggest {
        z-index: 1500;
        position: absolute;
        font-family: Arial;
        font-size: 11px;
        padding: 0px;
        margin: 0px;
        background-color: #FFF;
        border: 1px solid #666;
        color: #666;
        white-space: nowrap;
}
 
.suggest ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        cursor: pointer;
}
 
.suggest ul li {
        padding: 4px;
}
 
.suggest ul li.selected {
        background-color: #FFFF99;
}

Savez-vous comment pallier au comportement de Scriptaculous à ce sujet...?

[picwic]

Allô???

A en juger par mes recherches, ce bug a été rencontré un certain nombre de fois par les utilisateurs de Scriptaculous mais n'a jamais rencontré de résolution.

Beaucoup parle de bidouiller les z-index avec du javascript quand d'autres invoquent le 'stacking context' inhérent au z-index. Personnellement, après avoir testé la première et hautement considéré la seconde - je ne suis pas expert Javascript et encore moins CSS - je pense qu'il s'agit d'un bug Scriptaculous.

Qu'en pensez-vous?

(tiens.. j'aurais peut-être dû poster dans le forum Javascript...?)

[picwic]

[picwic]

Mea culpa. Scriptaculous n'est pas en cause.

Une solution consiste à changer le z-index des éléments conteneurs que l'on veut déplacer au moment où débute la saisie (et non de fixer celui de la liste en CSS). Ca se passe en deux temps :

• reset du z-index de chaque conteneur

  Code :

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

  $$('.classContainer').each(function(container) {container.setStyle({'zIndex': 0})});

• mise en avant (ici à 1500) du conteneur où apparait la liste suggestion

  Code :

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

  $('container_n').setStyle({'zIndex': 1500});

Plus d'info:
http://css-discuss.incutio.com/?page...ppingAndZIndex
http://developer.mozilla.org/en/docs...text_example_2