La barre de défilement Horizontal ne fonctionne pas sur la balise select

Je suis en train de mettre les barres de défilement horizontale sur une balise select qui ne fonctionne pas.

Voici le code:

  <select style="height: 250px; width: 300px; overflow: auto;" 
  id="dnn_ctr459_ManageRelatedProducts_lstFrom" multiple="multiple"   
  name="dnn$ctr459$ManageRelatedProducts$lstFrom" class="selectList" size="4">
     <option value="9">33 Uithoeke</option>
     <option value="10">Aantekeninge by Koos Prinsloo</option>
     <option value="11">Aantekeninge by Koos Prinsloo (enhanced e-book)</option>
     <option value="12">Access to Social Security</option>
     <option value="13">Angling for Interpretation</option>
  </select>

.selectList 
{
   height: 250px;
   overflow: auto;
   width: 300px;
}

La barre de défilement Horizontal ne fonctionne pas sur la balise select

Matt les résultats de la solution:
La barre de défilement Horizontal ne fonctionne pas sur la balise select

Résultat Final dans FFLa barre de défilement Horizontal ne fonctionne pas sur la balise select

Résultat Final dans IE, merci à Matt!La barre de défilement Horizontal ne fonctionne pas sur la balise select

overflow-x: scroll; au lieu de simplement overflow: scroll; aussi peut-être overflow-y: hidden;
Pouvez-vous afficher le code HTML pour le résultat FINAL? ta

OriginalL'auteur SixfootJames | 2011-08-24

  1. 3

    Vous ne savez pas si vous pouvez le faire, mais vous pouvez toujours forcer à le regarder de cette manière en plaçant un div autour de la sélection et le réglage de la largeur et de défilement horizontale. Prises à partir d'ici.

    Cela a fonctionné merci Matt, mais il ne force double barres de défilement dans IE7. Je pense que le fait de Défilement x défiler et y ne fonctionnent pas sous IE?
    devrait de travail, êtes-vous de la mettre en œuvre correctement? jetez un oeil à cette css overflow page de test.
    Cool, merci Matt. Il semble que dans IE vous devez manuellement l'interrupteur à côté de la barre de défilement verticale qui a fonctionné!
    bon à savoir, content d'avoir pu aider.

    OriginalL'auteur Matt K

  2. 0

    Vous ne pouvez pas forcer les barres de défilement sur sélectionner des éléments.

    Merci À Chris. Le problème que j'ai, c'est que le panier d'achat, nous sommes utilise cet élément select avec de très longs noms de produits et j'ai un peu besoin pour cela, sélectionnez l'élément à défiler. Matt K la suggestion ci-dessous pourrait fonctionner, mais alors ce serait dire qu'il y aurait deux barres de défilement (à la verticale) et il serait très difficile pour la navigation. Est-il un moyen de changer le wordwrap sur sélectionner des éléments peut-être?
    il n'est pas nécessaire d'être deux barres de défilement si vous utilisez overflow-x attribut...
    Merci Matt...qui semble avoir fonctionné. Je vais tester cela dans IE 7, en espérant que cela fonctionne aussi.
    Matt solution fonctionnera probablement. Personnellement, j'aurais créé un défilement vertical des div avec des boutons radio pour chaque option.
    Vous ne pouvez pas forcer les barres de défilement sur sélectionner des éléments. Citation nécessaire.

    OriginalL'auteur Chris

  3. -1

    Oui, vous le pouvez. Essayez avec JQuery:

    <div id='test' style="overflow-x:scroll; width:120px; overflow: -moz-scrollbars-horizontal;">
<select id='mySelect' name="mySelect" size="5">
    <option value="1">one two three four five six</option>
    <option value="2">seven eight</option>
    <option value="3">nine ten</option>
    <option value="1">one two three four five six</option>
    <option value="2">seven eight</option>
    <option value="3">nine ten</option>
    <option value="1">one two three four five six</option>
    <option value="2">seven eight</option>
    <option value="3">nine ten</option>
    <option value="1">one two three four five six</option>
    <option value="2">seven eight</option>
    <option value="3">nine ten</option>
</select>
<div id="divv" style='font-size: 1px'>&nbsp</div>
</div>

<script>
    $('#divv').css('width', $('#mySelect').outerWidth());
    $('#mySelect').css('width', $('#test').outerWidth());
    $( "#test" ).scroll(function() {
        $('#mySelect').css('width', $(this).outerWidth() + $(this).scrollLeft());
    });
</script>

    OriginalL'auteur Cyrus