opciones - menu desplegable javascript

Ancho de lista desplegable en IE

Question

En IE, la lista desplegable tiene el mismo ancho que Dropbox (espero que tenga sentido) mientras que en Firefox el ancho de la lista desplegable varía según el contenido.

Esto básicamente significa que tengo que asegurarme de que la Dropbox sea lo suficientemente amplia como para mostrar la selección más larga posible. Esto hace que mi página se vea muy fea :(

¿Hay alguna solución para este problema? ¿Cómo puedo usar CSS para establecer diferentes anchuras para Dropbox y la lista desplegable?

Answer 1

@Thad necesita agregar un controlador de eventos borrosos también

$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
$("#dropdown").blur(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});

Sin embargo, esto ampliará aún más la casilla de selección al hacer clic, en lugar de solo los elementos. (y parece fallar en IE6, pero funciona perfectamente en Chrome e IE7)

Answer 2

Crear su propia lista desplegable es más doloroso de lo que vale. Puede usar JavaScript para hacer que el IE desplegable funcione.

Utiliza un poco de la biblioteca YUI y una extensión especial para arreglar cuadros de selección de IE.

Deberá incluir lo siguiente y ajustar sus elementos <select> en <span class="select-box">

Pon estos antes de la etiqueta corporal de tu página:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( ''s1'' ); // s1 is the ID of the select box you want to affect
</script>

Edición de aceptación de publicación:

También puede hacer esto sin la biblioteca YUI y el control Hack. Todo lo que necesitas hacer es poner onmouseover = "this.style.width = ''auto''" onmouseout = "this.style.width = ''100px''" (o lo que quieras) en el elemento de selección. El control YUI le da una buena animación pero no es necesario. Esta tarea también se puede realizar con jquery y otras bibliotecas (aunque no he encontrado documentación explícita para esto)

- enmienda a la edición:
IE tiene un problema con el onmouseout para seleccionar controles (no considera que las opciones de mouseover sean un mouseover en la selección). Esto hace que usar un mouseout sea muy complicado. La primera solución es la mejor que he encontrado hasta ahora.

Answer 3

El enlace de hedgerwow (el trabajo de animación de YUI) en la primera mejor respuesta está roto, supongo que el dominio ha expirado. Copié el código antes de que caducara, por lo que puede encontrarlo aquí (el propietario del código me puede informar si estoy incumpliendo algún derecho de autor volviéndolo a cargar)

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

En la misma publicación del blog, escribí acerca de cómo hacer un mismo elemento SELECCIONAR exactamente igual al normal usando el menú del botón YUI. ¡Echa un vistazo y avísame si esto ayuda!

Answer 4

En función de la solución publicada por Sai , esta es la forma de hacerlo con jQuery.

$(document).ready(function() {
if ($.browser.msie) $(''select.wide'')
.bind(''onmousedown'', function() { $(this).css({position:''absolute'',width:''auto''}); })
.bind(''blur'', function() { $(this).css({position:''static'',width:''''}); });
});

Answer 5

En jQuery, esto funciona bastante bien. Supongamos que el menú desplegable tiene id = "menú desplegable".

$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});

Answer 6

Esto es algo que he hecho tomando partes de las cosas de otras personas.

 $(document).ready(function () {
if (document.all) {
$(''#<%=cboDisability.ClientID %>'').mousedown(function () {
$(''#<%=cboDisability.ClientID %>'').css({ ''width'': ''auto'' });
});
$(''#<%=cboDisability.ClientID %>'').blur(function () {
$(this).css({ ''width'': ''208px'' });
});
$(''#<%=cboDisability.ClientID %>'').change(function () {
$(''#<%=cboDisability.ClientID %>'').css({ ''width'': ''208px'' });
});
$(''#<%=cboEthnicity.ClientID %>'').mousedown(function () {
$(''#<%=cboEthnicity.ClientID %>'').css({ ''width'': ''auto'' });
});
$(''#<%=cboEthnicity.ClientID %>'').blur(function () {
$(this).css({ ''width'': ''208px'' });
});
$(''#<%=cboEthnicity.ClientID %>'').change(function () {
$(''#<%=cboEthnicity.ClientID %>'').css({ ''width'': ''208px'' });
});
}
});

donde cboEthnicity y cboDisability son listas desplegables con texto de opción más ancho que el ancho de la selección en sí.

Como puede ver, he especificado document.all ya que esto solo funciona en IE. Además, encerré las listas desplegables dentro de los elementos div como este:

<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>

Esto se ocupa de los otros elementos que se mueven fuera de lugar cuando se expande tu menú desplegable. El único inconveniente aquí es que la imagen visual menulista desaparece cuando está seleccionando, pero regresa tan pronto como lo haya seleccionado.

Espero que esto ayude a alguien.

Answer 7

Esto parece funcionar con IE6 y no parece romper otros. La otra cosa agradable es que cambia el menú automáticamente tan pronto como cambias tu selección desplegable.

$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});

Answer 8

Hasta ahora no hay uno. No sé sobre IE8 pero no se puede hacer en IE6 e IE7, a menos que implementes tu propia funcionalidad de lista desplegable con javascript. Hay ejemplos de cómo hacerlo en la web, aunque no veo mucho beneficio en la duplicación de la funcionalidad existente.

Answer 9

He tenido que solucionar este problema y una vez se me ocurrió una solución bastante completa y escalable para IE6, 7 y 8 (y compatible con otros navegadores, obviamente). He escrito un artículo completo al respecto aquí: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

Pensé que compartiría esto con las personas que todavía tienen este problema, ya que ninguna de las soluciones anteriores funciona en todos los casos (en mi opinión).

Answer 10

Intenté todas estas soluciones y ninguna funcionó completamente para mí. Esto es lo que se me ocurrió

$(document).ready(function () {
var clicknum = 0;
$(''.dropdown'').click(
function() {
clicknum++;
if (clicknum == 2) {
clicknum = 0;
$(this).css(''position'', '''');
$(this).css(''width'', '''');
}
}).blur(
function() {
$(this).css(''position'', '''');
$(this).css(''width'', '''');
clicknum = 0;
}).focus(
function() {
$(this).css(''position'', ''relative'');
$(this).css(''width'', ''auto'');
}).mousedown(
function() {
$(this).css(''position'', ''relative'');
$(this).css(''width'', ''auto'');
});
})(jQuery);

Asegúrese de agregar una clase desplegable a cada menú desplegable en su html

El truco aquí es usar la función de clic especializada (lo encontré aquí Evento de fuego cada vez que se selecciona un elemento DropDownList con jQuery ). Muchas de las otras soluciones aquí usan el cambio de manejador de eventos, que funciona bien pero no se activará si el usuario selecciona la misma opción que se seleccionó previamente.

Al igual que muchas de las otras soluciones, el enfoque y el mousedown son para cuando el usuario pone el menú desplegable en foco, el desenfoque es para cuando hacen clic fuera.

Es posible que también desee incluir algún tipo de detección de navegador para que solo tenga efecto, es decir. Sin embargo, no se ve mal en otros navegadores

Answer 11

La respuesta anterior de BalusC funciona muy bien, pero hay una pequeña solución que añadiría si el contenido de tu menú desplegable tiene un ancho menor que el que defines en tu CSS select.expand, agrégalo al enlace del mouseover:

.bind(''mouseover'', function() { $(this).addClass(''expand'').removeClass(''clicked'');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass(''expand'');
}})

Answer 12

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 = $(''<style>select.expand { width: auto; }</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'');
})
}
}

Answer 13

No hay forma de hacerlo en IE6 / IE7 / IE8. El control es dibujado por la aplicación e IE simplemente no lo dibuja de esa manera. Su mejor opción es implementar su propio menú desplegable a través de HTML / CSS / JavaScript simple, si es tan importante tener el menú desplegable de un ancho y la lista de otro ancho.

Answer 14

Pensé en arrojar mi sombrero al ring. Hago una aplicación SaaS y tenía un menú selecto incrustado dentro de una mesa. Este método funcionó, pero sesgó todo en la tabla.

onmousedown="if(navigator.appName==''Microsoft Internet Explorer''){this.style.position=''absolute'';this.style.width=''auto''}
onblur="if(navigator.appName==''Microsoft Internet Explorer''){this.style.position=''''; this.style.width= ''225px'';}"

Entonces, lo que hice para mejorarlo fue arrojar la selección dentro de una divinidad z-indexada.

<td valign="top" style="width:225px; overflow:hidden;">
<div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById(''select''); if(navigator.appName==''Microsoft Internet Explorer''){select.style.position=''absolute'';select.style.width=''auto''}">
<select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName==''Microsoft Internet Explorer''){this.style.position=''''; this.style.width= ''225px'';}" onChange="reportFormValues(''filter_<?=$job_id?>'',''form_values'')">
<option value="0">All</option>
<!--More Options-->
</select>
</div>
</td>

Answer 15

Puede agregar un estilo directamente al elemento seleccionado:

<select name="foo" style="width: 200px">

Por lo tanto, este elemento seleccionado tendrá 200 píxeles de ancho.

Alternativamente, puede aplicar una clase o id al elemento y referenciarlo en una hoja de estilo

Answer 16

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

// código JavaScript

<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '''';
}
function contractSELECT(sel) {
sel.style.width = ''100px'';
}
// end hiding -->
</script>

// Código HTML

<select name="sideeffect" id="sideeffect" style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
<option value="0" selected="selected" readonly="readonly">Select</option>
<option value="1" >Apple</option>
<option value="2" >Orange + Banana + Grapes</option>

Answer 17

Si usa jQuery, pruebe este IE select width plugin:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

La aplicación de este complemento hace que el cuadro de selección en Internet Explorer parezca funcionar como lo haría en Firefox, Opera, etc., permitiendo que los elementos de opciones se abran a todo lo ancho sin perder la apariencia y el estilo del ancho fijo. También agrega soporte para relleno y bordes en el cuadro de selección en Internet Explorer 6 y 7.

Answer 18

Tenemos lo mismo en una lista desplegable asp:

En Firefox (3.0.5) el menú desplegable es el ancho del elemento más largo en el menú desplegable, que es como 600 píxeles de ancho o algo así.

Answer 19

Un plugin jQuery completo está disponible. Es compatible con el diseño sin interrupciones y las interacciones del teclado, echa un vistazo a la página de demostración: http://powerkiki.github.com/ie_expand_select_width/

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

Answer 20

Usé la siguiente solución y parece funcionar bien en la mayoría de las situaciones.

<style>
select{width:100px}
</style>
<html>
<select onmousedown="if($.browser.msie){this.style.position=''absolute'';this.style.width=''auto''}" onblur="this.style.position='''';this.style.width=''''">
<option>One</option>
<option>Two - A long option that gets cut off in IE</option>
</select>
</html>

Nota: el $ .browser.msie requiere jquery.

Answer 21

esta es la mejor manera de hacer esto:

select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}

es exactamente lo mismo que la solución BalusC. Solo que esto es más fácil. ;)

Answer 22

mira esto ... no es perfecto pero funciona y es solo para IE y no afecta a FF. Usé el javascript regular para onmousedown para establecer IE only fix ... pero el msie de jquery podría usarse también en onmousedown ... la idea principal es el "onchange" y en blur para que el cuadro de selección vuelva a la normalidad ... . decide que eres de su propio ancho para esos. Necesitaba el 35%

onmousedown="javascript:if(navigator.appName==''Microsoft Internet Explorer''){this.style.width=''auto''}"
onchange="this.style.width=''35%''"
onblur="this.style.width=''35%''"

Answer 23

podrías probar lo siguiente ...

 styleClass="someStyleWidth"
onmousedown="javascript:if(navigator.appName==''Microsoft Internet Explorer''){this.style.position=''absolute'';this.style.width=''auto''}"
onblur="this.style.position='''';this.style.width=''''"

Lo intenté y me funciona. No se requiere nada más.

Answer 24

si desea un menú desplegable simple y / o menú desplegable sin efectos de transición solo use CSS ... puede forzar IE6 para admitir: pase el mouse sobre todos los elementos usando un archivo .htc (css3hover?) con comportamiento (propiedad solo IE6) definido en el archivo CSS condicionalmente adjunto.

Answer 25

http://developer.yahoo.com/yui/examples/button/button-menu-select.html#

Answer 26

Aquí hay otro ejemplo basado en jQuery . A diferencia de todas las demás respuestas publicadas aquí, se tienen en cuenta todos los eventos de teclado y mouse, especialmente los clics:

if (!$.support.leadingWhitespace) { // if IE6/7/8
$(''select.wide'')
.bind(''focus mouseover'', function() { $(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''); });
}

Úselo en combinación con esta pieza de CSS:

select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}

Todo lo que necesita hacer es agregar toda la clase a los elementos desplegables en cuestión.

<select class="wide">
...
</select>

Aquí hay un ejemplo jsfiddle . Espero que esto ayude.

Answer 27

¡Aquí está la solución más simple! Antes de comenzar, debo decir que el cuadro de selección desplegable se expandirá automáticamente en casi todos los navegadores excepto en IE6.so .. Haría una comprobación de navegador [es decir, IE6] y escribiré lo siguiente solo en ese navegador. Aquí va ... Primero verifica el navegador ...

El código expandirá mágicamente el cuadro de selección desplegable. El único problema con la solución es que el menú desplegable se ampliará a 420px ... y como el desbordamiento está oculto, estamos ocultando el tamaño desplegable expandido y mostrándolo como 170px, entonces, la flecha en el lado derecho de la ddl estará oculto y no se puede ver. pero el cuadro de selección se expandirá a 420px; que es lo que realmente queremos simplemente prueba el código a continuación y úsala si te gusta. Aclamaciones.

.ctrDropDown {ancho: 420px; } .ctrDropDownClick {ancho: 420px; }

el anterior es el IE6 css. el css común [para todos los demás navegadores] debería ser el siguiente.

 .ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}