HTML de selección desplegable de ir fuera de la pantalla

Question

Teniendo en cuenta el siguiente código:

<div style="float: left;"> 
    <select style="width: 160px;"> 
     <option>asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option> 
     <option>1</option> 
     <option>2</option> 
    </select> 
</div> 

<div style="float: right;"> 
    <select style="width: 160px;"> 
     <option>asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option> 
     <option>1</option> 
     <option>2</option> 
    </select> 
</div> 

Al abrir la caja de selección derecha, el contenido de la lista desplegable de ir fuera de la pantalla. Además, cuando la lista sea más larga, no podrá desplazarse por la lista (solo con la rueda del mouse y el teclado, pero la barra de desplazamiento es invisible)

¿Hay una solución para esto? Por supuesto, podría establecer un ancho/ancho máximo en las opciones, pero eso cortaría el contenido del elemento de opción. ¿Alguna sugerencia?

Answer 1

Creo que quiere decir que el lado derecho de la casilla de selección no está visible para que el usuario no pueda usar la barra de desplazamiento.

Tiene 2 opciones posibles que puedo ver fuera de cambiar a una solución de JavaScript, la primera es volver a colocar los elementos para permitir un contenido más largo.

La segunda es especificar el ancho del elemento a un valor porcentual como el siguiente, la desventaja es que el ancho del elemento de selección se cambiará dinámicamente y perderá algún control de diseño.

<div style="float: right;"> 
    <select style="width:100%"> 
     <option width=">asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option> 
     <option>1</option> 
     <option>2</option> 
    </select> 
</div> 

Hice una prueba rápida en Chrome y Firefox, puede utilizar lo que cada vez valor porcentual que deseas, he probado el 100% y el 50%, el 50% - en función de la naturaleza del contenido o cualquier colocar valores de titular como "--SELECT--", el elemento solo mostrará la mitad de la longitud del elemento más largo.

Me gustaría investigar los plugins de jQuery u otros JavaScripts para una mejor solución según mis necesidades en ese momento.

Answer 2

Salida esta respuesta

Are Multi-line Options in Html Select Tags Possible?

Con HTML puro y un selecto es imposible de auto-envolver el contenido de una opción en múltiples líneas (para que no se vaya fuera de la pantalla)

Answer 3

Me encontré con este problema recientemente (con Firefox) - el menú de selección abierta iría más allá de los límites de la pantalla del escritorio.

Mi solución fue copiar el contenido de la opción en el atributo del título. Y también actualice el título de selección al cambiar, de modo que al pasar el ratón sobre la opción o seleccionar aparecerá una información sobre herramientas en la ventana del navegador - demo.

var $select = $('select'); 

$select 
    .on('change', function() { 
     var $this = $(this), 
      // use replace to remove extra white (if desired) 
      txt = $this.find('option:selected').text().replace(/\s+/g, ' '); 
     // add title to select 
     $this.attr('title', txt); 
    }) 
    .change() 
    .find('option').each(function() { 
     var $this = $(this); 
     // add title to each option, so it works on hover 
     $this.attr('title', $this.text()); 
    });