Liste deroulante (select) et IE 6

**Mom's** · 14/09/2010, 11h32

Bonjour à toute la communauté.
Je viens vers vous parce que je suis une buse en JS.
Ceci explique peut être pourquoi je n'arrive pas a résoudre un problème que je rencontre.
Je vous explique mon problème.
Je voudrais faire une liste déroulante qui a une largeur dynamique.
Lorsque que elle n'est pas cliqué elle doit faire 130px, lorsque on clique dessus (qu'elle ce déroule) elle dois passer a 300px pour permettre la lecture de tous les libellés présent et une fois que on en à sélectionné un, elle doit repasser a 130px.
Le problème c'est que je n'arrive pas a faire ce comportement sous IE6, sous Firefox ça marche.
Le problème c'est lorsque je transpose le même code pour IE6, il y a un comportement bizarre dont je n'arrive pas a me débarrasser.
Au moment du focus, la liste s'élargit bien, mais elle ne ce déroule pas au 1er clic et il semble que elle soit comme vide. Lorsque je reclique dessus les éléments sont bien la.

Pour que vous puissiez voir le comportement, voila le code que j'ai fait.

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
36
 
<html>
	<head>
		<script language="JavaScript">
		<!--
			function test(form, idElement, valeur, evt)
			{	
				var selection = document.getElementById(idElement);
				var largeurMin = 130;
				var largeurMax = 380;
 
				selection.options[valeur].selected = true;
 
				if(evt == false)
				{
					selection.blur();
				}
 
				selection.style.width = (evt ? largeurMax:largeurMin)+'px';
			}
		-->
		</script>
    </head>
    <body>
		<form name="monFormulaire">
			<select id=10 name="monSelect" style="width: 130px"
				onFocus ='test(this.form, 10, monSelect.options.selectedIndex, true)'
				onChange ='test(this.form, 10, monSelect.options.selectedIndex, false)'>
				<option value=A>AA</option>
				<option value=B>BBBBB</option>
				<option value=C>CCCCCCCCCCC</option>
				<option value=D>DDDDDDDDDDDDDDD</option>
			</select>
		</form>
    </body>
</html>

En espérant avoir de l'aide qui serais bien précieuse........

A bientôt pour la suite de l'épisode de l'espère.

**Watilin** · 14/09/2010, 15h53

Salut,
je te le dis tout net, il n’y a pas de solution à ton problème. Les éléments de formulaire ont souvent une apparence gérée directement par le navigateur, voire même par le système d’exploitation, et on ne peut pas la manipuler avec CSS.
Et c’est d’autant plus vrai avec IE6 qui ne supporte déjà pas tout CSS2… Il risque d’y avoir des différences d’affichage avec d’autres navigateurs que tu n’as pas testés, comme Flock, Konkeror, etc.

Liste deroulante (select) et IE 6

JavaScript

Discussions similaires

Partager

Partager