28220 sujets

CSS et mise en forme, CSS3

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 :

<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

Smiley cligne

Qu'en pensez vous ?
Modifié par Alphajet (29 Jun 2005 - 14:10)
Moui en fait à propos de solution ça n'est pas encore ça. Le champ select ne fait que déborder... Mais reste toujours aussi grand. Bref le problème reste entier... Smiley bawling
Veuillez m'excuser pour cet incident de parcours Smiley sweatdrop
C'est corrigé Smiley smile

Néanmoins le problème reste entier, et je crois qu'à ce jour il n'existe pas de solution réelle.