Discussion :

[polothentik]

Salut,

J'ai un souci concernant la visualisation de proposition dans le cas d'une autocomplétion. L'utilisateur commence à taper un mot dans un input type=text et une liste de proposition apparait sous l'input.

Le problème vient du fait que dans mon formulaire j'ai plusieurs champ les uns à la suite des autres et lorsque les propositions apparaissen, elles s'affichent SOUS les champs input suivants et non pas DESSUS. Autrement dit, on ne voit pas grand chose pour faire son choix (ce qui n'ai pas très malin )

Voici les propriétés CSS de mes propositions affichées en LISTE :

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
 
#autocomplete ul {
	left: 0px;
	top: 4px;
	width: 226px;
	margin: 4px 0px 0px -2px;
	padding: 0px 0px 0px 0px;
	list-style-type: none;
	max-height: 20em;
	overflow: auto;
	cursor: pointer;
	z-index: 8;
}
 
 
#autocomplete ul li {
	list-style-type: none;
	display: block;
	margin: 0px 0px 0px 0px;
	padding: 2px 0px 0px 4px;
	font-family: arial;
	font-size: 13px;
	color: #444444;
	vertical-align: middle;
	background-color: #FFFFFF;
}
 
 
#autocomplete ul li.selected {
	font-family: Arial;
	font-size: 13px;
	color: #FFFFFF;
	vertical-align: middle;
	background-color: #CC0000;

Voici les propriétés CSS d'un champ input :

Code :

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

1
2
 
var textboxCSS = 'position:relative; width:223px; top:2px; left:-200px; border:none; color:#222222; font-family:verdana; font-size:14px;';

Quelqu'un aurait-il une idée pour faire passer les propositions par-dessus les champ input suivant ?

Rq: lorsque l'utilisateur choisit une proposition, la liste de proposition disparait

Merci d'avance

[franculo_caoulene]

Salut,

As-tu essayé de passer un z-index inférieur à celui de la liste aux textbox? En effet, il n'est pas renseigné dans ta variable.

[polothentik]

Je viens d'essayer mais ça ne change rien !

Mais quel type d'élément permet d'afficher une liste par-dessus quelque chose ?

Merci d'avance

[Er3van]

Le z-index te permet effectivement de faire ce que tu veux comme l'a dit Franculo, mais il faut pour cela que tes éléments soient positionnés, et que ce soit des blocs.
Les types inlines ne peuvent à ma connaissance recevoir de z-index. Mais peut-être que je me trompe ( ça m'arrive souvent avec les z-index ^^ )

Essaye ça dans ta liste:

Code :

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

"display:block;"

[polothentik]

j'ai spécifié display:block et z-index:80 dans #autocomplete ul et autocomplete ul li mais l'affichage de la liste se fait toujours sous les champs du formulaires dont le z-index:2



Help !

[Er3van]

Il faut que tu précises le positionnement, relatif dans ton cas à mon avis.

[polothentik]

Je recapepette !

pour mes input le z-index est 4
pour ma liste le ul a z-index:80 position:relative et display:block

mais rien ne se passe

Je me sui rendu compte que les propositions de la liste affiche ce qui apparait derrière par transparence ???????!!!!

merci d'avance !

[franculo_caoulene]

Simplifie ton code et montre le nous : http://www.developpez.net/forums/sho...d.php?t=346025
Pas besoin de faire de l'ajax, affiche le div par défaut.