Liste déroulante avec textes longs

Liste déroulante avec textes longs - HTML/CSS - Programmation

Marsh Posté le 28-06-2005 à 17:24:30    

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.
 
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.
 
Est ce que quelqu'un connait une astuce pour éviter ce problème? (pas trouvé ma réponse sur le net)
 
Merci!


---------------
Bien joué! Mais une brique ne rend jamais les coups.
Reply

Marsh Posté le 28-06-2005 à 17:24:30   

Reply

Marsh Posté le 29-06-2005 à 09:03:30    

Problème insoluble à ce jour?  :D  


---------------
Bien joué! Mais une brique ne rend jamais les coups.
Reply

Marsh Posté le 29-06-2005 à 09:45:47    

Exactement

Reply

Marsh Posté le 29-06-2005 à 11:18:24    


J'ai bien l'impression aussi  :(  certains ont essayé des solutions alternatives comme mettre la ligne du "option" en pseudo popup en css (qui s'affiche en surimpression donc) mais ça n'a pas fonctionné.
 
J'ai envisagé aussi de faire défiler le texte, mais apparament ça ne marche pas non plus...


---------------
Bien joué! Mais une brique ne rend jamais les coups.
Reply

Marsh Posté le 29-06-2005 à 11:22:28    

ben dans ton cas si tu essayait plutôt de faire une liste avec bouton radio
et un div à hauteur fixe avec un overflow
<div>
<input type="radio" name="montruc" id="radio1"><label for="radio1">option1</label>
<input type="radio" name="montruc" id="radio2"><label for="radio2">option2</label>
<input type="radio" name="montruc" id="radio3"><label for="radio3">option3</label>
</div>

Reply

Marsh Posté le 29-06-2005 à 11:40:11    

Oui en effet, je vois ce que tu veux dire, ça permettrait de faire défiler la liste des boutons radio, c'est une solution qui marche.
 
Malheureusement j'ai des contraintes à respecter, et je dois conserver la mise en page originale, je ne pense pas que ça sera accepté. Merci en tout cas :)
 
Là 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. Je pense qu'on conservera ça au pire ...


Message édité par Alphajet le 29-06-2005 à 11:40:47

---------------
Bien joué! Mais une brique ne rend jamais les coups.
Reply

Marsh Posté le 29-06-2005 à 12:21:53    

Je suis en train d'expérimenter une 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 ;)
 
Mais c'est peut être un début de solution?


---------------
Bien joué! Mais une brique ne rend jamais les coups.
Reply

Marsh Posté le 29-06-2005 à 12:31:46    

La meilleure des solution, est de tronquer côté serveur le contenu de ta liste [:spamafote]

Reply

Marsh Posté le 29-06-2005 à 17:12:28    

C'est une solution :) pas forcément la solution la plus adaptée pour moi, étant donné que le contenu complet est important, est que tronquer fait perdre de l'information.


---------------
Bien joué! Mais une brique ne rend jamais les coups.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed