una forma de saber si las opciones no encajan dentro de un seleccionar - en IE

Question

En IE6, y posiblemente 7, si configura el ancho de un valor distinto de automático, si las opciones dentro de esa selección son más amplias, entonces el ancho de la selección, se cortan. esto es malo. Firefox es lo suficientemente inteligente como para no hacer esto.

Pregunta: ¿Cómo puedo saber si las opciones se cortan con javascript?

¿Cómo se ha lidiado con este problema aparte de establecer el ancho en automático?

Answer 1

Buena pregunta. Un poco de despotricar aquí, pero la implementación de IE de los controles <select> es abismal. Tiene los siguientes problemas (entre otros estoy seguro):

• (Como se ha notado) establecer el ancho de los recortes <select> fuera <option> elementos, independientemente de overflow instrucciones
• tienen este magic ability to sit overtop of all other controls on the page, independientemente de las instrucciones de posición y estratificación (z-index). Este fue un gran PITA para los primeros desarrolladores de widgets de "diálogo"; cualquier menú desplegable detrás del diálogo sangraría a través del borde del diálogo mismo.
• you cannot disable individual <option> elements
• you cannot hide/show individual <option> elements
• la <select> no refleja los estilos CSS establecidos en el seleccionado <option>
• can't set the innerHTML property to a string of new option items
• si lo hace no establecer un atributo value en cada <option>, mySelectBox.value falla silenciosamente
• al usar las flechas del teclado para navegar a través de la lista de <option> elementos, los change desencadena el evento en cada golpe de teclado (Opera tiene este problema también)
• estilos CSS en <option> s y <optgroup> s son generalmente ignorados por completo (only backgound-color and color work)
• cambiar mediante programación la lista de opciones oculta el menú desplegable (esto es una mierda de intentos de implementación de "escritura anticipada" que desean que el menú desplegable permanezca visible)
• IE7 intenta ajustar todas las opciones en la pantalla cuando se muestran. Para listas grandes, esto significa que el contenido desplegable se situará sobre la barra desplegable cuando se muestre (esto por sí solo no es incorrecto, pero es inconsistente con otras versiones de IE)

En cuanto a su problema, una solución es alternar el width a "auto" cuando se muestran las opciones, y establecer si de nuevo a un ancho establecido cuando las opciones están cerradas, como se indica aquí: http://css-tricks.com/select-cuts-off-options-in-ie-fix/

la desventaja obvia de esto es que los tornillos el flujo del documento como todos los elementos vecinos cambian para dar cuenta de la configuración width:auto.

Answer 2

Eche un vistazo a this post de Chris Coyier.