28173 sujets

CSS et mise en forme, CSS3

[Résolu] Taille d'une liste déroulance (<select>)

Bonjour,

Je voudrais qu'une liste déroulante ne dépasse pas de son div parent au départ et que lorsque l'on clique dessus, elle prenne sa largeur normale (pour que l'on puisse voir toutes ses options). Je ne veux pas faire de overflow : hidden ou auto car cela fait disparaitre la flèche qui une information indispensable pour l'utilisateur. Es ce que cela est possible?

Le css que j'ai essayé :
div.tabletext select.inputBox{
max-width : 16em;
}

div.tabletext select.inputBox:active{
max-width : 1000em;
}


Le html :
<div class="tabletext">
                Type d'intégration :<br>
	           <select class="inputBox" name="ietypeEnumId">

                   <option value="">&nbsp;</option>
                   <option value="IE_EVT_TYPE_INV_MVT">
                        Mouvement d'Inventaire
                   </option>
                   (...)
                   </select>
	      </div>

Avec le css ci-dessus, la liste ne dépasse pas mais elle ne s'agrandit pas quand on clic dessus, ce qui fait que des libellés sont coupés.
Modifié par Pwapwal (22 Jun 2007 - 12:55)
Hello,

Pwapwal a écrit :
elle prenne sa taille normale

Je suppose que tu parles de la largeur et non pas de la hauteur ? Penses à éviter les termes trop génériques lorsque tu décris un problème précis. Smiley cligne

Pour la possibilité de la chose... j'ai de très gros doutes, étant donné le peu de contrôle possible sur les éléments de formulaire.

Un test qui marche bien avec Firefox et Opera, mais pas avec IE (6 ou 7) :
<!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">
	div {
		width: 300px;
		padding: 10px;
		border: solid 1px red;
	}
	select {
		max-width: 100%;
	}
	</style>
	<!--[if IE]><style type="text/css">
	select {
		width: 100%;
	}
	</style><![endif]-->
</head>

<body>

<div>
	<select>
		<option value="test1">Test</option>
		<option value="test2">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
		</option>
		<option value="test3">
		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.
		</option>
	</select>

	<select>
		<option value="test1">Test 1</option>
		<option value="test2">Test 2</option>
		<option value="test3">Test 3</option>
	</select>
</div>

</body>
</html>


Si le problème vient d'intitulés trop longs, il va falloir les raccourcir...
Modifié par Florent V. (22 Jun 2007 - 12:27)
C'est bien ce que je pensais, ça n'a pas l'air possible. Merci de ton aide.

J'ai édité pour la largeur. Smiley cligne
Pwapwal a écrit :
C'est bien ce que je pensais, ça n'a pas l'air possible.

À voir peut-être en Javascript.
Sujet clos
Aller à