La barra de desplazamiento horizontal no funciona en la etiqueta de selección

Estoy tratando de establecer las barras de desplazamiento horizontales en una etiqueta de selección que no está funcionando.La barra de desplazamiento horizontal no funciona en la etiqueta de selección

Aquí está el código:

<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

resultados de Matt solución en este: resultado enter image description here

final en FF enter image description here

resultado final en el IE, gracias a Matt! enter image description here

Fuente

2011-08-24 SixfootJames

overflow-x: scroll; en lugar de solo desbordamiento: desplazamiento; también tal vez overflow-y: hidden; –

¿Se puede mostrar el código HTML para el resultado FINAL? ta – Rippo

No estoy seguro si puede hacer eso, pero siempre puede engañarlo para que se vea así colocando un div alrededor de la selección y estableciendo el ancho y desplazamiento horizontal sobre eso. Taken from here.

Fuente

2011-08-24 14:19:15

Esto funcionó gracias a Matt, pero forza barras de desplazamiento dobles en IE7. Creo que porque Scroll-x y scroll-y no funcionan en IE? – SixfootJames

debería funcionar, ¿lo está implementando correctamente? [eche un vistazo a esta página de prueba de desbordamiento de css] (http://www.brunildo.org/test/Overflowxy2.html). –

Genial, gracias Matt. ¡Parece que en IE tienes que desconectar manualmente la barra de desplazamiento vertical que funcionó! – SixfootJames

No puede forzar barras de desplazamiento en elementos seleccionados.

Fuente

2011-08-24 14:18:32 Chris

Gracias Chris. El problema que estoy teniendo es que el carrito de compras que estamos usando usa este elemento selecto con nombres de producto muy largos y de alguna manera necesito que este elemento de selección se desplace. La sugerencia de Matt K a continuación funcionaría, pero eso significaría que habría dos barras de desplazamiento (verticales) y dificultaría la navegación. ¿Hay alguna manera de cambiar la palabra en elementos seleccionados quizás? – SixfootJames

no tiene que haber dos barras de desplazamiento si usa el atributo overflow-x ... –

Gracias Matt ... parece haber funcionado. Voy a probar esto ahora en IE 7 y espero que esto también funcione. – SixfootJames

-1

Sí, puedes. Pruébelo 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>

Fuente

2014-03-29 16:59:40 Cyrus

La barra de desplazamiento horizontal no funciona en la etiqueta de selección

Respuesta

Cuestiones relacionadas