Bonjour,
J'ai des listes déroulantes générées à partir de données provenant d'une BD. Jusque là pas de problème, mais lorsque les textes sont très longs, la taille du "select" est elle aussi très grande, et ça me pose des problèmes de mise en page (j'ai un bloc de select en "float: left" collé sur un autre, donc si les champs select sont trop larges, ça passe sous le premier bloc).
Solution, imposer la taille du "select" en css avec [ width: XX px ; ]
Cela fonctionne très bien avec Mozilla, c'est à dire que le select fait bien la largeur fixée, et les textes débordent pour s'afficher en entier.
Malheureusement Internet Explorer tronque la taille des libellés à la taille fixée pour le select, ce qui est gênant, puisque la description n'est pas vraiment lisible.
Jusqu'à présent, je n'ai trouvé aucune solution sur Internet, même si des essais ont été faits (par ex, mettre un bloc span dans le option qui génèrerait la totalité du champ en surimpression, comme les info-bulles, mais ça ne fonctionnait pas)
Alors j'ai fait des essais, et je suis en train d'expérimenter un début de solution qui pourrait marcher sur Firefox comme sous IE6. Elle simule le comportement de Firefox.
Voilà le principe :
HTML :
CSS :
Les valeurs de "top" et "left" ne signifient rien ici. Mais la position en absolu fait sortir le div du flux naturel, et le "z-index: 1" fait apparaitre le select en surimpression.
Le problème dans mon cas reste encore de positionner ça correctement
Qu'en pensez vous ?
Modifié par Alphajet (29 Jun 2005 - 14:10)
J'ai des listes déroulantes générées à partir de données provenant d'une BD. Jusque là pas de problème, mais lorsque les textes sont très longs, la taille du "select" est elle aussi très grande, et ça me pose des problèmes de mise en page (j'ai un bloc de select en "float: left" collé sur un autre, donc si les champs select sont trop larges, ça passe sous le premier bloc).
Solution, imposer la taille du "select" en css avec [ width: XX px ; ]
Cela fonctionne très bien avec Mozilla, c'est à dire que le select fait bien la largeur fixée, et les textes débordent pour s'afficher en entier.
Malheureusement Internet Explorer tronque la taille des libellés à la taille fixée pour le select, ce qui est gênant, puisque la description n'est pas vraiment lisible.
Jusqu'à présent, je n'ai trouvé aucune solution sur Internet, même si des essais ont été faits (par ex, mettre un bloc span dans le option qui génèrerait la totalité du champ en surimpression, comme les info-bulles, mais ça ne fonctionnait pas)
Alors j'ai fait des essais, et je suis en train d'expérimenter un début de solution qui pourrait marcher sur Firefox comme sous IE6. Elle simule le comportement de Firefox.
Voilà le principe :
HTML :
<div>Libellé de la liste</div>
<div class="blocSelect">
<select name="liste1">
<option value="0">-----</option>
<option value="1">Ici long texte qui va être large et déborder</option>
</select>
</div>
CSS :
.blocSelect {
position : absolute ;
top: 80px ;
left: 68% ;
z-index: 1 ;
}
Les valeurs de "top" et "left" ne signifient rien ici. Mais la position en absolu fait sortir le div du flux naturel, et le "z-index: 1" fait apparaitre le select en surimpression.
Le problème dans mon cas reste encore de positionner ça correctement

Qu'en pensez vous ?
Modifié par Alphajet (29 Jun 2005 - 14:10)