texto - menu desplegable vertical html
Seleccionar menú desplegable con ancho fijo que corta contenido en IE (23)
¿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(''<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>'').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;
}
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)
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
Página html completa en caso de que quiera probar rápidamente en un navegador:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>
<style type="text/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;
}
-->
</style>
</head>
<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>
Aquí hay un pequeño script que debería ayudarte:
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();
});
Encontré una solución bastante directa para esto. En el elemento <select> 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.
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
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"));
});
}
});
}
}
La mejor solución: css + javascript
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"));
});
La solución de jquery BalusC''s 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'');
})
}
}
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 , 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!
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");
});
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.
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
Para una solución simple libre de Javascript, agregar un atributo de título a la <opción> que contiene el texto puede ser suficiente, dependiendo de sus requisitos.
<option value="242" title="Very long and extensively descriptive text">
Very long and extensively descriptive text
</option>
Esto mostrará el texto de corte en forma de punta de herramienta al pasar la <opción>, independientemente del ancho de la <selección>.
Funciona para IE7 +.
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 = ''<!--[if gt IE '' + (++v) + '']><i></i><![endif]-->'',
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"));
});
}
}
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
<!--[if lt IE 9]>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on(
{
''mouseenter'': function(event) {
jQuery(this).addClass(''clicked'');
},
''focusout change blur'': function() {
jQuery(this).removeClass(''clicked'');
}
}, ''select.fixedwidth'');
});
</script>
<![endif]-->
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).onlugar dejQuery(''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 eventomouseleavepero no unblur.
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>
// Html code
<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>
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) css-tricks.com/select-cuts-off-options-in-ie-fix .
Simplemente puede usar este complemento para jquery;)
http://plugins.jquery.com/project/skinner
$(function(){
$(''.select1'').skinner({''width'':''200px''});
});
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).
Un enfoque diferente:
- 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
- otra edición oculta para contener una identificación de una opción seleccionada (se explica a continuación)
- hacer un botón [..] y guiarlo para mostrar que div debajo
- crea un div oculto con una posición absoluta debajo o cerca del cuadro de edición
- 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"
- 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
- 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.
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):
<!-- Limit width of the wrapping div instead of the select and use ''overflow: hidden'' to hide the right part of it. -->
<div style=''width: 145px; overflow: hidden; border-right: 1px solid #aaa;''>
<select onchange=''jump();''>
<!-- ''▼(▼)'' produces a fake dropdown indicator -->
<option value=''''>Jump to ... ▼</option>
<option value=''1''>http://.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie</option>
...
</select>
</div>
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;
}
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
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.