La barra di scorrimento orizzontale non funziona sul tag select

Sto provando ad impostare le barre di scorrimento orizzontali su un tag select che non funziona.La barra di scorrimento orizzontale non funziona sul tag select

Ecco il codice:

<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; 
}

enter image description here

di Matt soluzione si traduce in questo: risultato enter image description here

finale in FF enter image description here

Risultato finale in IE, grazie a Matt! enter image description here

fonte

2011-08-24 SixfootJames

overflow-x: scroll; invece di overflow: scroll; forse anche overflow-y: hidden; –

Puoi mostrare il codice HTML per il risultato FINALE? ta – Rippo

Non è sicuro se lo si può fare, ma è sempre possibile ingannarlo facendolo apparire posizionando un div intorno alla selezione e impostando la larghezza e lo scorrimento orizzontale su quella. Taken from here.

fonte

2011-08-24 14:19:15

Questo ha funzionato grazie a Matt ma forza le doppie barre di scorrimento in IE7. Penso che Scroll-x e scroll-y non funzionano in IE? – SixfootJames

dovrebbe funzionare, stai implementando correttamente? [dai un'occhiata a questa pagina di test di overflow css] (http://www.brunildo.org/test/Overflowxy2.html). –

Cool, grazie Matt. Sembra che in IE sia necessario spegnere manualmente la barra di scorrimento verticale che ha funzionato! – SixfootJames

Non è possibile forzare le barre di scorrimento sugli elementi selezionati.

fonte

2011-08-24 14:18:32 Chris

Grazie Chris. Il problema che sto avendo è che il carrello che stiamo usando usa questo elemento select con nomi di prodotto molto lunghi e ho bisogno di questo elemento select per scorrere. Il suggerimento di Matt K qui sotto funzionerebbe, ma ciò significherebbe che ci sarebbero due barre di scorrimento (verticali) e renderebbe molto difficile la navigazione. C'è un modo per cambiare il wordwrap su elementi selezionati, forse? – SixfootJames

non ci devono essere due barre di scorrimento se si utilizza l'attributo overflow-x ... –

Grazie Matt ... sembra aver funzionato. Lo metterò alla prova ora in IE 7 e spero che anche questo funzioni. – SixfootJames

-1

Sì, è possibile. Provalo con 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>

fonte

2014-03-29 16:59:40 Cyrus

La barra di scorrimento orizzontale non funziona sul tag select

risposta

Problemi correlati