28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Pour éviter que les select dépassent de leurs parents j'utilise ce css :

select
{
max-width: 98%;
}


Mais elle fait complétement disparaître les listes (à part quand j'utilise "afficher les informations de l'élément" de Web Developper et que je passe dessus)!!!

Ce que j'essaie de régler :
upload/5466-selectdepas.png
Ce que ça me donne, en pointillé rouge, là où le select est (remarquez ma maitrise de gimp Smiley biggrin ) :
upload/5466-selectdispa.png

PS : je suis sous Ubuntu Feisty, Firefox 2.0.0.4. Je n'ai pas testé sous IE, mais Konqueror affiche tout parfaitement.
Modifié par Pwapwal (02 Jul 2007 - 13:29)
Un petit up et j'en profite pour dire que ça marche avec Epiphany et que quand je mets em au lieu de % , ça marche niquel (pour epiphany, konqueror et FF), sauf que c'est pas du tout ce que je veux faire.
Modifié par Pwapwal (02 Jul 2007 - 16:40)
Hello,

Pas de bug constaté dans Firefox et Opera.
Internet Explorer, par contre, n'applique pas max-width. C'est à dire que :
- la version 6 ne comprend pas max-width ;
- la version 7 le comprend et l'applique pour la plupart des éléments, mais apparemment pas pour les select.

Il faudra probablement se rabattre vers un width: 100% (ou ignorer IE et laisser le champ dépasser dans quelques cas, du moment qu'ils sont rares.

Ne pas oublier de choisir des intitulés courts aux option. Smiley cligne
Le problème de width:100%, c'est qu'il va parfois mettre des select qui prendront toute la largeur du parent, ce qui donne un rendu ignoble et perd l'utilisateur qui croit qu'il faut cliquer sur la flèche (qui se retrouve tout à droite).

Je ne peux malheureusement pas mettre de libellés courts pour les options car c'est pour une application professionelle qui nécessite des libellés précis.

J'aurais au moins appris comment IE gère max-width... Enfin, la disparition du select est très bizarre, puisque je peux les faire réapparaitre lorsque j'utilise certains outils de webdevelopper. Smiley eek
Pwapwal a écrit :
Je ne peux malheureusement pas mettre de libellés courts pour les options car c'est pour une application professionelle qui nécessite des libellés précis.

Alors il va falloir faire des cases plus larges...

Au passage : même si on arrive à avoir une largeur maximale ou fixe pour les select, ça pose problème à IE si les intitulés des option sont trop longs : IE n'affiche les option que sur la largeur du select, et du coup les intitulés sont rognés s'ils sont trop longs.

Si on a besoin d'intitulés longs, on peut aussi utiliser des input de type radio.