Ancho de la lista desplegable en IE
https://stackoverflow.com/questions/73960
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
En IE, la lista desplegable tiene el mismo ancho que el cuadro desplegable (espero que tenga sentido), mientras que en Firefox el ancho de la lista desplegable varía según el contenido.
Básicamente, esto significa que debo asegurarme de que el cuadro desplegable sea lo suficientemente ancho como para mostrar la selección más larga posible.Esto hace que mi pagina se vea muy fea :(
¿Existe alguna solución para este problema?¿Cómo puedo usar CSS para establecer diferentes anchos para Dropbox y la lista desplegable?
Solución
Aquí está otro jQuery ejemplo basado.A diferencia de todas las demás respuestas publicadas aquí, tiene en cuenta todos los eventos del teclado y el 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 necesitas hacer es agregar la clase. wide al elemento desplegable en cuestión.
<select class="wide">
...
</select>
Aquí hay un ejemplo de jsfiddle..Espero que esto ayude.
Otros consejos
Crear su propia lista desplegable es más complicado de lo que vale la pena.Puede utilizar algo de JavaScript para que funcione el menú desplegable de IE.
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 envolver su <select> elementos en un <span class="select-box">
Ponlos antes de la etiqueta del cuerpo 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 posterior a la aceptación:
También puedes hacer esto sin la biblioteca YUI y el control Hack.Todo lo que realmente necesitas hacer es poner un onmouseover="this.style.width='auto'" onmouseout="this.style.width='100px'" (o lo que quieras) en el elemento seleccionado.El control YUI le da esa bonita 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 onmouseout para controles de selección (no considera que pasar el mouse sobre las opciones sea un mouseover sobre la selección).Esto hace que usar un mouseout sea muy complicado.La primera solución es la mejor que he encontrado hasta ahora.
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 funciona para mí.No se requiere nada más.
Utilicé 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 $.navegador.msie requiere jquery.
@Thad también necesitas agregar un controlador de eventos de desenfoque
$(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 seguirá expandiendo el cuadro de selección al hacer clic, en lugar de solo los elementos.(y parece fallar en IE6, pero funciona perfectamente en Chrome e IE7)
No hay forma de hacerlo en IE6/IE7/IE8.La aplicación dibuja el control y 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 con un ancho y la lista con otro ancho.
Si usa jQuery, pruebe este complemento de selección de ancho de IE:
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. al permitir que los elementos de opción se abran en todo su 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.
En jQuery esto funciona bastante bien.Supongamos que el menú desplegable tiene id="dropdown".
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
Aquí está la solución más sencilla.
Antes de comenzar, debo decirle que el cuadro de selección desplegable se expandirá automáticamente en casi todos los navegadores excepto IE6.Entonces, haría una verificación del navegador (es decir, IE6) y escribiría lo siguiente solo en ese navegador.Aquí va.Primero verifique el navegador.
El código expandirá mágicamente el cuadro de selección desplegable.El único problema con la solución es que al colocar el mouse sobre el menú desplegable se expandirá a 420 px y, debido a que overflow = oculto, ocultamos el tamaño del menú desplegable expandido y lo mostramos como 170 px;por lo tanto, la flecha en el lado derecho del ddl estará oculta y no podrá verse.pero el cuadro de selección se ampliará a 420 px;que es lo que realmente queremos.Simplemente prueba el siguiente código tú mismo y úsalo si te gusta.
.ctrDropDown
{
width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:420px; <%-- this the width of the dropdown select box.--%>
}
<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>
Lo anterior es el CSS de IE6.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.--%>
}
si desea un menú desplegable y/o desplegable simple sin efectos de transición, simplemente use CSS...puede forzar que IE6 admita :hover en todos los elementos usando un archivo .htc (css3hover?) con comportamiento (propiedad única de IE6) definido en el archivo CSS adjunto condicionalmente.
mira esto..No es perfecto pero funciona y es sólo para IE y no afecta a FF.Utilicé el javascript normal para onmousedown para establecer la solución solo para IE.pero el msie de jquery también podría usarse en onmousedown.la idea principal es "cambiar" y desenfocar para que el cuadro de selección vuelva a la normalidad...decide tu 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%'"
La respuesta anterior de BalusC funciona muy bien, pero hay una pequeña solución que agregaría si el contenido de su menú desplegable tiene un ancho menor que el que define en su CSS select.expand, agregue esto al enlace del mouseover:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
Esto es algo que he hecho tomando fragmentos 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 menús desplegables con un texto de opción más ancho que el ancho de la propia selección.
Como puede ver, he especificado document.all ya que esto solo funciona en IE.Además, encerré los menús desplegables dentro de 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 encarga de que los otros elementos se salgan de su lugar cuando se expande el menú desplegable.El único inconveniente aquí es que el objeto visual de la lista de menú desaparece cuando selecciona, pero regresa tan pronto como lo selecciona.
Espero que esto ayude a alguien.
esta es la mejor manera de hacer esto:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
Es exactamente igual que la solución BalusC.Sólo que esto es más fácil.;)
Está disponible un complemento jQuery completo.Admite interacciones de teclado y diseño ininterrumpidas; consulte la página de demostración: http://powerkiki.github.com/ie_expand_select_width/
descargo de responsabilidad:Codifiqué esa cosa, los parches son bienvenidos
La solución de jquery BalusC mejorada por mí.Usado también:Brad Robertson comenta aquí.
Simplemente coloque esto en un .js, use la clase amplia para las combinaciones que desee y no olvide darle una identificación.Llame a la función en la carga (o documentReady o lo que sea).
Tan simple como eso :)
Utilizará el ancho que definiste para el combo como largo mínimo.
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');
})
}
}
Puede agregar un estilo directamente al elemento seleccionado:
<select name="foo" style="width: 200px">
Entonces este elemento seleccionado tendrá 200 píxeles de ancho.
Alternativamente, puede aplicar una clase o identificación al elemento y hacer referencia a él en una hoja de estilo.
Hasta el momento no hay ninguno.No conozco IE8, pero no se puede hacer en IE6 e IE7, a menos que implemente su propia funcionalidad de lista desplegable con javascript.Hay ejemplos de cómo hacerlo en la web, aunque no veo muchos beneficios en duplicar la funcionalidad existente.
Tenemos lo mismo en un asp:dropdownlist:
En Firefox (3.0.5), el menú desplegable es el ancho del elemento más largo del menú desplegable, que tiene como 600 píxeles de ancho o algo así.
Esto parece funcionar con IE6 y no parece dañar a otros.La otra cosa buena es que cambia el menú automáticamente tan pronto como cambias la 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");
}
});
});
El enlace hedgerwow (la solución alternativa a la animación YUI) en la primera mejor respuesta está roto, supongo que el dominio expiró.Copié el código antes de que caducara, así que puedes encontrarlo aquí (el propietario del código puede informarme si estoy infringiendo algún derecho de autor subiéndolo nuevamente)
En la misma publicación del blog escribí sobre cómo crear exactamente el mismo elemento SELECT como el normal usando el menú del botón YUI.¡Echa un vistazo y déjame saber si esto ayuda!
Basado en la solución publicada por Sai, así es como se hace 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:''}); });
});
Pensé en tirar mi sombrero al ring.Hago una aplicación SaaS y tenía un menú de selección integrado dentro de una tabla.Este método funcionó, pero sesgó todo lo que estaba 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 todo fue lanzar la selección dentro de un div indexado en z.
<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>
Está probado 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>
Tuve que solucionar este problema y una vez se me ocurrió una solución bastante completa y escalable que funciona para IE6, 7 y 8 (y, obviamente, es compatible con otros navegadores).He escrito un artículo completo al respecto aquí mismo: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
Pensé en compartir 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).
Probé 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 (la encontré aquí Evento de disparo cada vez que se selecciona un elemento DropDownList con jQuery).Muchas de las otras soluciones aquí utilizan el cambio de controlador de eventos, que funciona bien pero no se activará si el usuario selecciona la misma opción que seleccionó anteriormente.
Como muchas de las otras soluciones, el enfoque y el mousedown son para cuando el usuario enfoca el menú desplegable, el desenfoque es para cuando hace clic para alejarse.
Es posible que también desee incluir algún tipo de detección del navegador en esto para que solo afecte, es decir.Aunque no se ve mal en otros navegadores.
