Discussion :

[Titus999]

Bonjour
Je n’arrive pas à trouver une solution apparemment simple. Comment ajouter une barre de défilement horizontal et une barre de défilement vertical (simultanément) à un contrôle ListBox?
J’ai essayé d'envelopper listbox dans un div. Pas d'affichage de deux barres en même temps. Si les deux barres s'affichent une n'est pas opérationnelle. Voici le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    <div id="ddd" style="max-width:189px;max-height:190px;overflow-x:scroll; display: inline-block;">
             <asp:ListBox ID="ListBox11" CssClass="font25" AutoPostBack="false"  runat="server" Style="border: none; border-radius: 5px 5px;max-height: 200px; max-width: 600px;"></asp:ListBox>
      </div>

Environnement : asp.net, webforms, vb.net ou c#
Merci

[jreaux62]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

overflow:scroll;

[Titus999]

Mais non..

[NoSmoking]

Bonjour,
les éléments <select> ne sont pas simple à modifier, chaque navigateur gérant le rendu de façon différente.

Si tu veux pouvoir faire ce que tu souhaites une bonne solution est de passer par des <select> customisé.

Pour info, text-overflow:ellipsis ne fonctionne pas sur des <select> n'ayant pas d'attribut size et en aucun cas sur les supports autres que desktop.

Regarde :
↪ Élément <select> et text-overflow:ellipsis si cela peut-être une solution à ton soucis.

[Titus999]

Merci NoSmoking
Mon problème est de trouver un moyen pour faire apparaitre une barre de défilement horizontal pour le contrôle ListBox. J’ai vu beaucoup de « solutions » basées sur l’utilisation des div et des CSS. Mais une fois implémentées, la barre de défilement vertical s’affiche également et il faut défiler le texte vers la droite pour le voir en entier. Ce qui n’est pas naturel. Une solution de contournement serait de pouvoir insérer un retour a la ligne lors d’un débordement, un peu a la manière de dropdownlist d’une application mobile ou du cas suivant :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="id1" style="width:100px;border-style:double; word-break:normal">
  <div id="id2" class="selected">Vert</div>
  <div id="id3">Orangerrrrrrrrrrrr hh rrrrr ggg rrrrr  yyyy rrrrrr ooon rrrrrrrrrrrrrrr</div>
  <div id="id4">Rouge</div>
  <div id="id5">Bleu ciel de l'atlantique a la mer noire et de la mer noire a l'atlantique</div> 
 </div>

J"essayerai de suivre la piste SELECT même si tous mes essais n'ont rien donné.
Merci

[NoSmoking]

J'ai du mal à voir ce que tu cherche au final à réaliser !

Mais une fois implémentées, la barre de défilement vertical s’affiche également et il faut défiler le texte vers la droite pour le voir en entier.

As tu exploré la piste de l'attribut size sur le <select> ?

Une solution de contournement serait de pouvoir insérer un retour a la ligne lors d’un débordement,

Dans ce cas oublie tout de suite le <select> standard, pas du tout malléable à configurer.