18041 sujets

Questions générales et questions de débutants

Forcer le retour a la ligne dans form/select...

Bonjour !

Savez vous si il est possible de forcer le retour a la ligne dans un champ select de formulaire ? C'est a dire que si des options du select sont trop grandes, elles soient affichées sur plusieurs lignes au lieu d'être coupées par la taille limitée du champ select ?

En effet j'ai un champ select assez court (limité en largeur a 250px environ), et il contient des options assez longues, et c'est dommage de ne pas pouvoir tout lire Smiley langue

Merci d'avance, en espérant qu'il existe une solution soit en passant par les styles CSS, soit par des attributs un peu inconnus (j'ai déjà fait le tour sur quelques sites, mais je ne crois pas avoir trouvé d'attribut approprié) !

Thx !
Peut-être tenter de forcer la longueur en assignant une largeur maximale aux éléments <option> du groupe <select>. Il faudra par contre laisser une hauteur flexible pour que le texte qui déborde puisse être rejeté sous la première ligne.

Donc, qqchose du genre :

option{width:---px;}

Il y a lieu de tenter le coup!
Je ne crois pas qu'aucun navigateur ne traite les option comme susceptibles de passer sur plusieurs lignes.
Sinon, un test. Marche dans Firefox uniquement, et pas dans Opera, Konqueror ou IE6. De plus, ça semble effacer les valeurs dans IE7. À confirmer pour ce dernier.

Donc juste par curiosité :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	select {width: 300px; height: 1.5em;}
	option {width: 300px; white-space:normal;}
	option.pair {background: #afe;}
	option.impair {background: #acf;}
	</style>
</head>

<body>

<select>
<option class="pair">Court</option>
<option class="impair">Un peu plus long tout de même</option>
<option class="pair">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</option>
<option class="impair">Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</option>
</select>

</body>
</html>


La solution la plus simple reste de... raccourcir la longueur des option. Si on a des option de trois pieds de long, on a peut-être un problème rédactionnel plus que technique. NB : des explications, ça peut se donner autour d'un formulaire ou dans une page spécifique (voire une petite popup). Smiley cligne
Sujet clos
Aller à