Seleccionar menú desplegable con ancho fijo que corta contenido en IE

La cuestión:

Algunos de los elementos en la selección requieren más del ancho especificado de 145px para mostrarse completamente.

Comportamiento de Firefox : al hacer clic en Seleccionar, se muestra la lista de elementos desplegables ajustada al ancho del elemento más largo.

Comportamiento de IE6 e IE7 : al hacer clic en la selección, se muestra la lista de elementos desplegables restringida a 145 píxeles de ancho, lo que imposibilita la lectura de los elementos más largos.

La interfaz de usuario actual nos exige ajustar este menú desplegable en 145px y hacer que aloje elementos con descripciones más largas.

¿Algún consejo sobre cómo resolver el problema con IE?

El elemento superior debe permanecer 145 px de ancho incluso cuando la lista se expande.

¡Gracias!

El css:

select.center_pull { background:#eeeeee none repeat scroll 0 0; border:1px solid #7E7E7E; color:#333333; font-size:12px; margin-bottom:4px; margin-right:4px; margin-top:4px; width:145px; } 

Aquí está el código de entrada de selección (no hay definición para el estilo backend_dropbox en este momento)

  Browse options ------------------------------------ Option 1 Longer title for option 2 Very long and extensively descriptive title for option 3  

Página html completa en caso de que quiera probar rápidamente en un navegador:

     dropdown test      

Select width test

Browse options ------------------------------------ Option 1 Longer title for option 2 Very long and extensively descriptive title for option 3

Para IE 8 hay una solución pura basada en css pura:

 select:focus { width: auto; position: relative; } 

(Debe establecer la propiedad de posición, si la casilla de selección es hija de un contenedor con ancho fijo).

Desafortunadamente, IE 7 y menos no son compatibles con: selector de enfoque.

Hice Google sobre este tema pero no encontré ninguna solución mejor, así que creé una solución que funciona bien en todos los navegadores.

simplemente llame a la función badFixSelectBoxDataWidthIE () en la carga de la página.

 function badFixSelectBoxDataWidthIE(){ if ($.browser.msie){ $('select').each(function(){ if($(this).attr('multiple')== false){ $(this) .mousedown(function(){ if($(this).css("width") != "auto") { var width = $(this).width(); $(this).data("origWidth", $(this).css("width")) .css("width", "auto"); /* if the width is now less than before then undo */ if($(this).width() < width) { $(this).unbind('mousedown'); $(this).css("width", $(this).data("origWidth")); } } }) /* Handle blur if the user does not change the value */ .blur(function(){ $(this).css("width", $(this).data("origWidth")); }) /* Handle change of the user does change the value */ .change(function(){ $(this).css("width", $(this).data("origWidth")); }); } }); } } 

Aquí hay un pequeño script que debería ayudarte:

http://www.icant.co.uk/forreview/tamingselect/

Para una solución simple libre de Javascript, agregar un atributo de título a la que contiene el texto puede ser suficiente, dependiendo de sus requisitos.

  

Esto mostrará el texto de corte en forma de punta de herramienta al pasar la , independientemente del ancho de la .

Funciona para IE7 +.

No tengo Javascript libre, me temo, pero logré hacerlo bastante pequeño usando jQuery

 $('#del_select').mouseenter(function () { $(this).css("width","auto"); }); $('#del_select').mouseout(function () { $(this).css("width","170px"); }); 

Simplemente puede usar este complemento para jquery;)

http://plugins.jquery.com/project/skinner

 $(function(){ $('.select1').skinner({'width':'200px'}); }); 

Pequeña, pero afortunadamente útil actualización para el código de MainMa y user558204 (gracias chicos), que elimina el innecesario cada bucle, almacena una copia de $ (esto) en una variable en cada controlador de eventos, ya que se utiliza más de una vez, también combina el difumina y cambia los eventos ya que tienen la misma acción.

Sí, aún no es perfecto, ya que cambia el tamaño del elemento seleccionado, en lugar de solo las opciones desplegables. Pero hey, me sacó de un aprieto, yo (muy, pero lamentablemente) aún tengo que soportar una base de usuarios dominante en IE6 en todo el negocio.

 // IE test from from: https://gist.github.com/527683 var ie = (function () { var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = '', all[0] ); return v > 4 ? v : undef; } ()); function badFixSelectBoxDataWidthIE() { if (ie < 9) { $('select').not('[multiple]') .mousedown(function() { var t = $(this); if (t.css("width") != "auto") { var width = t.width(); t.data("ow", t.css("width")).css("width", "auto"); // If the width is now less than before then undo if (t.width() < width) { t.unbind('mousedown'); t.css("width", t.data("ow")); } } }) //blur or change if the user does change the value .bind('blur change', function() { var t = $(this); t.css("width", t.data("ow")); }); } } 

Un enfoque diferente:

  1. en lugar de seleccionar, conviértalo en un cuadro de edición, deshabilitado para que nadie pueda ingresar nada manualmente o cambiar el contenido después de la selección
  2. otra edición oculta para contener una identificación de una opción seleccionada (se explica a continuación)
  3. hacer un botón [..] y guiarlo para mostrar que div debajo
  4. crea un div oculto con una posición absoluta debajo o cerca del cuadro de edición
  5. haga que ese div contenga una selección con tamaño de estilo = “6” (para mostrar 6 opciones y una barra de desplazamiento en lugar de una lista desplegable) y un botón “seleccionar” y quizás “cancelar”
  6. No ajuste el ancho de manera que todo el ancho asumirá el ancho de la opción más ancha o el botón y quizás un relleno de su elección
  7. escriba el botón “seleccionar” para copiar el id de la opción seleccionada en el cuadro de edición oculto y su valor para el visible, también para ocultar el div nuevamente.

4 comandos simples de javascript en total.

Encontré una solución bastante directa para esto. En el elemento html, agregue estas propiedades:

 onmouseover="autoWidth(this)" onblur="resetWidth(this)" 

Por lo tanto, siempre que el usuario haga clic en eso, el ancho se expandirá automáticamente y el usuario se moverá fuera del cuadro de selección, el ancho se restablecerá a original.

Se puede encontrar una solución similar aquí usando jquery para establecer el ancho automático cuando se enfoca (o mouseenter) y establecer el ancho de la señal de nuevo cuando se borre (o mouseleave) http://css-tricks.com/select-cuts-off-options-in -ie-fix / .

 for (i=1;i<=5;i++){ idname = "Usert" + i; document.getElementById(idname).style.width = "100%"; } 

Utilicé esta manera para mostrar la lista desplegable cuando el ancho no se muestra correctamente.

Funciona para IE6, Firefox y Chrome.

Existe un plugin JQuery completo, revisa la página de demostración: http://powerkiki.github.com/ie_expand_select_width/

descargo de responsabilidad: codifiqué esa cosa, los parches son bienvenidos

¿Por qué alguien querría un mouse sobre el evento en una lista desplegable? Aquí hay una forma de manipular IE8 para la forma en que debería funcionar una lista desplegable:

Primero, asegurémonos de que solo estamos aprobando nuestra función en IE8:

  var isIE8 = $.browser.version.substring(0, 2) === "8."; if (isIE8) { //fix me code } 

Luego, para permitir que la selección se expanda fuera del área de contenido, envolvemos nuestras listas desplegables en div’s con la estructura correcta, si no es así, y luego llamamos a la función auxiliar:

  var isIE8 = $.browser.version.substring(0, 2) === "8."; if (isIE8) { $('select').wrap('
').css('position', 'absolute'); //helper function for fix ddlFix(); }

Ahora en los eventos. Como IE8 lanza un evento después de centrarse por cualquier razón, IE cerrará el widget después de renderizar cuando intente expandirse. El trabajo será enlazar a ‘enfocar’ y ‘enfocar’ una clase que se expandirá automáticamente en función del texto de opción más largo. Entonces, para asegurar un ancho mínimo constante que no se reduzca más allá del valor predeterminado, podemos obtener el ancho actual de la lista de selección y establecerlo en la propiedad min-width de la lista desplegable en el enlace ‘onchange’ :

  function ddlFix() { var minWidth; $('select') .each(function () { minWidth = $(this).width(); $(this).css('min-width', minWidth); }) .bind('focusin', function () { $(this).addClass('expand'); }) .change(function () { $(this).css('width', minWidth); }) .bind('focusout', function () { $(this).removeClass('expand'); }); } 

Por último, asegúrese de agregar esta clase en la hoja de estilos:

  select:focus, select.expand { width: auto; } 

No estoy libre de Javascript, me temo que también y mi solución requiere una biblioteca js, sin embargo, solo puedes usar esos archivos que necesitas en lugar de usarlos todos, quizás los más adecuados para aquellos que ya están usando YUI para sus proyectos o decidir qué uno para usar. Eche un vistazo a: http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

La publicación de mi blog también analiza otras soluciones, una hace referencia aquí en stackoverflow, el motivo por el que volví a crear mi propio elemento SELECT es por una razón simple, no me gustan los eventos de mouseover expand. ¡Tal vez si eso ayuda a alguien más también!

La solución de jquery BalusC mejoró por mí. Usado también: el comentario de Brad Robertson aquí .

Simplemente ponga esto en .js, use la clase amplia para sus combos deseados y no falsifique para darle una Id. Llame a la función en la carga (o documentReady o lo que sea).
Como simple culo que 🙂
Utilizará el ancho que definió para el combo como longitud mínima.

 function fixIeCombos() { if ($.browser.msie && $.browser.version < 9) { var style = $(''); $('html > head').append(style); var defaultWidth = "200"; // get predefined combo's widths. var widths = new Array(); $('select.wide').each(function() { var width = $(this).width(); if (!width) { width = defaultWidth; } widths[$(this).attr('id')] = width; }); $('select.wide') .bind('focus mouseover', function() { // We're going to do the expansion only if the resultant size is bigger // than the original size of the combo. // In order to find out the resultant size, we first clon the combo as // a hidden element, add to the dom, and then test the width. var originalWidth = widths[$(this).attr('id')]; var $selectClone = $(this).clone(); $selectClone.addClass('expand').hide(); $(this).after( $selectClone ); var expandedWidth = $selectClone.width() $selectClone.remove(); if (expandedWidth > originalWidth) { $(this).addClass('expand').removeClass('clicked'); } }) .bind('click', function() { $(this).toggleClass('clicked'); }) .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); } }) .bind('blur', function() { $(this).removeClass('expand clicked'); }) } } 

Se probó en todas las versiones de IE, Chrome, FF y Safari

// código JavaScript

   // Html code  

Tengo otra contribución más a esto. Hace un tiempo escribí esto que puede ser útil: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

Es un complemento jquery para hacer una lista desordenada estiloable respaldada por el elemento de selección oculto.

La fuente está en github: https://github.com/tncbbthositg/GiantDropdown

Sería capaz de manejar comportamientos y estilos en UL que no puede con SELECT. Todo lo demás debe ser igual porque la lista de selección todavía está allí, está oculta, pero UL la usará como un almacén de datos de respaldo (si lo desea).

Quería que esto funcionara con selects que agregué dinámicamente a la página, así que después de mucha experimentación, terminé dando todas las selecciones que quería hacer con la clase “fixedwidth”, y luego agregué el siguiente CSS:

 table#System_table select.fixedwidth { width: 10em; } table#System_table select.fixedwidth.clicked { width: auto; } 

y este código

  

Un par de cosas a anotar:

  • A pesar de que mis seleccionados están todos en una tabla, tuve que hacer “on” en jQuery(document).on lugar de jQuery('table#System_table').on
  • A pesar del hecho de que la documentación de jQuery dice que use ” mouseleave ” en lugar de ” blur “, encontré que en IE7 cuando movía el mouse hacia abajo en la lista desplegable, obtenía un evento mouseleave pero no un blur .

Aquí hay una solución que realmente funciona.

Establece el ancho en IE y no estropea el diseño de la página y no cierra el menú desplegable al pasar el mouse sobre las opciones de selección como algunas de las otras soluciones en esta página.

Sin embargo, necesitará cambiar los valores de margin-right valor de margin-right para que coincida con lo que tiene para sus campos de selección.

También puede reemplazar $('select') con $('#Your_Select_ID_HERE') para que solo $('#Your_Select_ID_HERE') un campo de selección específico. Además necesitarás llamar a la función fixIESelect() en el cuerpo en onload o mediante jQuery usando DOM ready como lo hice en mi código a continuación:

 ////////////////////////// // FIX IE SELECT INPUT // ///////////////////////// window.fixIESelect_clickset = false; function fixIESelect() { if ($.browser.msie) { $('select').mouseenter(function () { $(this).css("width","auto"); $(this).css("margin-right","-100"); }); $('select').bind('click focus',function () { window.fixIESelect_clickset = true; }); $('select').mouseout(function () { if(window.fixIESelect_clickset != true) { $(this).css("width","93px"); window.fixIESelect_clickset = false; } }); $('select').bind('blur change',function () { $(this).css("width","93px"); }); } } ///////////// // ONLOAD // //////////// $(document).ready(function() { fixIESelect(); }); 

Para mi diseño, no quería un truco (no aumentaba el ancho, no hacía clic con automático y luego volvía al original). Rompió mi disposición existente. Solo quería que funcionara normalmente como otros navegadores.

Encontré que esto es exactamente así:

http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-with-fixed.html

Una solución alternativa si no le importa la vista extraña después de seleccionar una opción (es decir, seleccionar para saltar a una nueva página):

  

Una solución de CSS pura: http://bavotasan.com/2011/style-select-box-using-only-css/

 .styled-select select { background: transparent; width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; } .styled-select { width: 240px; height: 34px; overflow: hidden; background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd; border: 1px solid #ccc; } 
 

La mejor solución: css + javascript

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

 var el; $("select") .each(function() { el = $(this); el.data("origWidth", el.outerWidth()) // IE 8 can haz padding }) .mouseenter(function(){ $(this).css("width", "auto"); }) .bind("blur change", function(){ el = $(this); el.css("width", el.data("origWidth")); });