Chosen: El elegido se "corta" cuando se coloca en un área con "desbordamiento: oculto".

Este es el mismo que el número 59.

¿No es esto inevitable ya que el elemento contenedor está bien, "desbordamiento: oculto" así es como funciona CSS? La única forma de evitar esto es renderizar el menú desplegable fuera del contenedor y luego usar el posicionamiento absoluto.

Sí, estoy de acuerdo con dfischer. No parece un problema de Elegidos. Por definición, la propiedad de desbordamiento especifica qué sucede si el contenido desborda los límites de un elemento. Si no desea que el _desbordamiento_ esté oculto, cambie esa propiedad.

Si bien es cierto, creo que este es un caso de uso común con cuadros de diálogo. (Especialmente el diálogo de jquery)

Es un caso de uso común, sin embargo, basado en este ticket, como mencioné anteriormente ... toda la estructura y la implementación deben cambiar si desea lograr esto.

Se le _requiere_ renderizar fuera del contenedor para que esto suceda y luego usar jQuery / JS magic para averiguar el posicionamiento relativo al disparador.

El caso de jQuery Dialog no depende de un elemento contenedor, por lo que solo usa el posicionamiento basado en las dimensiones centrales y el ancho del diálogo.

Esto es más un problema de CSS, no un problema de Elegido. No pongas desbordamiento: oculto en el contenedor. Tendrá que usar otra técnica para limpiar los flotadores debajo de él si eso es lo que está haciendo.

Acabo de escribir un código que creo que hace lo que estás buscando:

$ .fn.extend ({
elegido: función (datos, opciones) {
if ($ (esto) .parent (). css ("desbordamiento") == "oculto") {
// obtener las compensaciones entre padre e hijo para calcular la diferencia
// cuando empujamos a absoluto
var y = $ (this) .offset (). top - $ (this) .parent (). offset (). top,
x = $ (esto) .offset (). left - $ (this) .parent (). offset (). left,
$ t1 = $ ("<div />", {
css: {
"posición": "relativa",
"altura": $ (esto) .parent (). altura,
"ancho": $ (esto) .parent (). ancho
}
}),
$ t2 = $ ("<div />", {
css: {
"posición": "absoluta",
"arriba": y,
"izquierda": x
}
});
$ t1.insertBefore ($ (esto) .parent ());
$ (esto) .parent (). appendTo ($ t1);
$ t2.appendTo ($ t1);
$ (esto) .appendTo ($ t2);
}
return $ (esto) .each (function (input_field) {
if (! ($ (esto)). hasClass ("chzn-done")) {
devolver nuevo Elegido (esto, datos, opciones);
}
});
}
});

(por cierto, soy nuevo en github a partir de hoy, así que si hay un lugar diferente donde debería publicar código, hágamelo saber)

Ese código efectivamente hace lo siguiente:

1. calcular el desplazamiento entre el cuadro de selección y el padre.
2. cree un div padre con las mismas dimensiones que su desbordamiento oculto y establecido en relativo.
3. cree un padre para el cuadro de selección creando el elemento como absoluto usando las compensaciones xey del paso 1.
4. inserte el nuevo padre antes del padre de la selección, agregue el div de desbordamiento dentro del nuevo padre, agregue ese nuevo padre seleccionado dentro del padre principal, agregue la selección al nuevo padre secundario.

Interesante idea, Matthew, pero creo que eso no va a funcionar en un diálogo de jQuery-UI, ¿verdad?

Es más probable que el elemento desplegable (.chzn-drop) deba extraerse del .chzn-container y subir al cuerpo del documento ...

Simplemente agregue un estilo a la página y su respuesta es sí:

.ui-dialog { desbordamiento: visible; }

No funciona para mí, ya que creo mis páginas usando div como columnas (a diferencia de td y tablas).
Utilizo " overflow: hidden " para evitar que el contenido fuera de control arruine los divs vecinos.

Supongo que muchos de ustedes usan la misma estructura.

Eso no funcionará, ya que los cuadros de diálogo están configurados para desbordarse: automático para que puedan
tener barras de desplazamiento si es necesario.

El viernes 29 de julio de 2011 a las 11:47 p.m., ethaniel
[email protected]
escribió:

No funciona para mí, ya que creo mis páginas usando div como columnas (a diferencia de td y tablas).
Utilizo " overflow: hidden " para evitar que el contenido fuera de control arruine los divs vecinos.

Supongo que muchos de ustedes usan la misma estructura.

Responda a este correo electrónico directamente o véalo en GitHub:
https://github.com/harvesthq/chosen/issues/86#issuecomment -1681303

Antes de profundizar en esta conversación, lo que he hecho es una solución teórica. No se puede aplicar a todos los escenarios porque todo lo que se necesita es un elemento que tenga un atributo contrario para arruinarlo. La solución anterior con el desbordamiento visible solo funcionará con la opción de diálogo resizable: false. ¿Por qué necesitaría tener un desbordamiento de selección fuera de un diálogo?

Ok, aquí hay un montón de capturas de pantalla que, con suerte, aclaran el problema.

http://i.imgur.com/9ZY9O.png
http://i.imgur.com/c2PLo.png
http://i.imgur.com/1oqZ7.png
http://i.imgur.com/ZBrQj.png

Las capturas de pantalla 1 y 2 muestran cómo se comporta, no hay suficiente espacio para
el menú desplegable "dentro" del cuadro de diálogo, por lo que se desplaza y se oculta como un
resultado. Esto es muy torpe de usar y feo y no como el construido en
los controles seleccionados funcionan (se muestran en la parte superior del contenido, sin importar
qué tan profundo están o cuál es su estilo de desbordamiento).

Las capturas de pantalla 3 y 4 muestran mi solución actual, que es poner un
montón de espacio debajo del menú desplegable. Esto también es feo y hace que la forma
más difícil de usar.

Entonces, para resumir, el punto real es que los controles de selección nativos no son
restringido a su contenedor principal y, si es posible, el elegido
El control de selección mejorado tampoco debería serlo, ya que está diseñado para ser
un reemplazo directo del control nativo.

En teoría, esto se puede hacer, pero requeriría un sistema de construcción / posicionamiento completamente diferente por parte del complemento elegido. Este cambio sería extenso y requeriría una reescritura del 30% del complemento actual. Considero que esto es una solicitud de función y no un error. Todos los navegadores tienen un renderizado predeterminado para los elementos seleccionados. Elegido lo replica usando divs pero no se trata como un elemento seleccionado.

Como dije, la única forma de hacer esto es el posicionamiento absoluto FUERA del elemento disparado. No hay otra manera. Correcto en @medelbrock

Si bien sería muy bueno haber elegido comportarse como un widget de navegador, estoy de acuerdo en que esto debería considerarse una característica, no un error. ¿Podemos establecer una altura máxima actualmente?

@veloper : Lo div.chzn-drop todavía está contenido en el cuadro de diálogo, por lo que se recortará independientemente de si está absolutamente posicionado o no.

La única forma de detener eso será sacar el div.chzn-drop del cuadro de diálogo y convertirlo en un hijo de <body> , pero como todos señalan, ese es un cambio más grande que nadie. está dispuesto a ensuciarse las manos intentándolo.

Desafortunadamente, usar overflow:visible no es una opción, el diálogo debe ser desplazable si es necesario.

Creo que resolví el problema estableciendo la posición del menú desplegable en absoluto y siempre que mostraba el menú desplegable configurando su posición.
por ejemplo, cambiar (editar el javascript)

this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
});

para

var parent = this.dropdown.parent();
var offset = parent.offset();
dd_top = offset.top + parent.outerHeight();
dd_width = parent.width();
this.dropdown.css({
    "top": dd_top + "px",
    "left": offset.left,
    "width": dd_width + "px"
});

Me estoy encontrando con este problema mientras trato de hacer que Chosen funcione dentro de un diálogo de interfaz de usuario de Wijmo / jQuery. Puede que esté fuera de mi liga aquí, pero ¿no hay una solución bastante simple para hacer que la parte del "menú desplegable" tenga "display: none" mientras esté oculta, y luego "display: block" cuando se muestre? Seguiría incurriendo en las barras de desplazamiento cuando el menú desplegable está abierto, pero probablemente sea mejor que tener las barras de desplazamiento siempre presentes.

La solución (probada en Chrome 13, Firefox 7 e IE 9):

En elegido.css:

.chzn-container .chzn-drop {
posición: fija;
}

y en Chosen.prototype.results_show

var offset = this.container.offset ();
this.dropdown.css ({
"arriba": (offset.top + dd_top) + "px",
"izquierda": desplazamiento.izquierda + "px",
"bloqueo de pantalla"
});

http://img30.imageshack.us/img30/4094/chosen3.png

Eso es lo que pasa, bien pensado @levushka. Resuelto ahora en mi sucursal: https://github.com/tompaton/chosen/commit/fda07051161f3fffe6049362b6c9b66ffbe857d1

Ok, es un poco más complicado que eso. La solución anterior no funcionó si se desplazaba la página.

Actualicé mi repositorio con un conjunto de cambios que lo corrige, el menú desplegable está colocado correctamente ahora, pero si la página se desplaza mientras el menú desplegable está visible, no se mueve como se esperaba. Eso es molesto, pero no es un impedimento.

iOS 5 _podría_ resolver esto, pero iOS actualmente no admite la posición: corregido de la misma manera que lo hacen los navegadores de escritorio. Chosen funciona de maravilla en el escritorio, pero esto podría limitar su uso en navegadores móviles mal diseñados ...

No solo estoy eligiendo Apple aquí, la versión anterior de Android también carece de soporte para la posición: fija.

A partir de jQuery 1.7 (aún no lanzado, pero en versión candidata), tienen una prueba incorporada para la compatibilidad con CSS Position Fixed:
http://bugs.jquery.com/ticket/6809

Podría valer la pena detectar jQuery 1.7 y usar su resultado, o copiar su código y obtener un resultado separado de lo contrario.

+1 para la posición al final del elemento del cuerpo.

compruebe el widget de jquery "autocompletar". bastante buena solución para ese problema:

http://jqueryui.com/demos/autocomplete/

gran complemento por cierto.

Tuve este problema principalmente en los navegadores webkit. IE simplemente se vuelve mental con elegido, así que lo desactivé si es decir. Usando jquery, verifico si el navegador es un webkit, y ajusto el desbordamiento del div que contiene mis elegidos así:

if($.browser.webkit) $(this).css("overflow",($(this).is(":visible"))?"visible":"hidden");

donde este es el div que contiene los elegidos.

+1 @levushka y @tompaton No es perfecto, pero lo suficientemente bueno. Apenas :)

La solución

en Chosen.prototype.results_show

reemplazar:

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

con:

if($('.popup').length!=0) {

  var offset = this.container.offset();
  this.dropdown.css({
    "top": (offset.top+dd_top) + "px",
    "left": offset.left + "px",
    "display": "block"
  });

} else {

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

}

CSS:

   .popup .chzn-container .chzn-drop { position:fixed; }

Si está utilizando jQuery UI u otra cosa, puede tener problemas con el índice z, así que configure el índice z elegido en valores más altos (jQuery UI es 1010+)

Ahora está funcionando en FF y para Chrome necesitas:

     .popup { overflow-x:visible; overflow-y:visible; }

Los elementos del amante pueden tener overlow: ocultos sin problemas.

¿Por qué no renderizar el menú desplegable en el cuerpo y usar la función de posición de Jquery UI para colocar el cuadro? http://jqueryui.com/demos/position/. Este es el método estándar utilizado para muchos widgets de interfaz de usuario de jquery.

$ (".czn-drop") .position ({
de: $ ("#container"),
mi: "arriba a la izquierda",
en: "parte inferior izquierda",
});

Perdóname por irrumpir, tuve el mismo problema al mostrar el menú desplegable elegido en un cuadro de diálogo de jQueryUI.
Probé las cosas habituales con desbordamiento, pero esto estaba estropeando mis otros diálogos.

En su lugar, lo que hice fue establecer mi diálogo a una altura fija y establecer el menú desplegable elegido a una altura fija también.
Sería bueno tener una opción para hacer esto desde las opciones elegidas en lugar de css.

.chzn-drop {
desbordamiento: automático;
altura máxima: 75px;
}

Quizás esto ayude a alguien más.

Disculpe por una pregunta bastante n00bish / RTFM, pero ¿cómo puedo mostrar el menú desplegable fuera del contenedor (por ejemplo, en body )? En este momento, lo único que me viene a la mente es bifurcar el complemento e insertar ese fragmento de código en él. Debe haber una forma más elegante de lograrlo.

¿Hay un evento que el elegido dispare cuando el menú desplegable está abierto / cerrado? Si es así, puedo cambiar la configuración de desbordamiento de los divs de los padres a visible y luego volver. Intenté eso con:

$(".chzn-drop").show(0, function () { 
   $(this).parents("div").css("overflow", "visible");
});    

Y sí, funcionó. Pero, luego, cuando agregué:

$(".chzn-drop").hide(0, function () {
   $(this).parents("div").css("overflow", "");
});

Ya no funcionó. Supongo que porque tengo varios controles elegidos en el formulario. Si pudiera agregar este código dentro de un evento de apertura / cierre, creo que me llevaría a donde quiero ir.

Puede escuchar los liszt:showing_dropdown y liszt:hiding_dropdown enviados en el elemento de selección original

Excelente ... así que esto resolvió mi problema:

$ (". chzn-select"). on (" liszt: show_dropdown ", function () {
$ (esto) .parents ("div"). css ("desbordamiento", "visible");
});
$ (". chzn-select"). on (" liszt: hiding_dropdown ", function () {
$ (esto) .parents ("div"). css ("overflow", "");
});

Por supuesto, es posible que no funcione con todos los diseños.

Gracias ... BOb

He bifurcado el código para crear el elemento secundario desplegable de <body/> . No lo probé lo suficiente todavía, pero funciona aquí perfectamente -> https://github.com/gil/chosen

¿Puedes ver si resuelve tu problema, @tompaton? Creo que solo tengo que detectar el desplazamiento ahora, para fijar la posición manualmente.

La bifurcación solucionó el problema de la pantalla para mí y funcionó bien en la parte inferior de la página, donde limitó la altura que mostraba a algo razonable. Sin embargo, la bifurcación detuvo el funcionamiento de la funcionalidad de selección múltiple.

@geoffweatherall ¿ example.jquery.html y decirme si no funciona? Para mí parece estar bien.

Sí, los ejemplos funcionan bien (FF 12).

El ejemplo de selección única está en una página html bastante simple con "paneles" que usan desbordamiento oculto. Sin embargo, el ejemplo de selección múltiple está en un "diálogo" creado usando colorbox (http://www.jacklmoore.com/colorbox) - no me preguntes por qué, el proyecto era así cuando llegué. Supongo que podría tener algo que ver con eso, lo investigaré.

La bifurcación soluciona el problema de corte en varias ubicaciones de nuestra aplicación, incluidas las selecciones múltiples que no están anidadas dentro de las cajas de color (http://www.jacklmoore.com/colorbox). Creo que el problema con la caja de color no es culpa de la elección. Gran tenedor :-)

De hecho, encontré un problema con la bifurcación que se muestra en la página de muestra (example.jquery.html). Para el control de selección múltiple, si hace clic en el control para abrir la lista de opciones y luego usa las teclas de flecha hacia arriba y hacia abajo para navegar por la lista, la lista de opciones hace un movimiento sorpresa hacia la parte superior de la página. Este problema no ocurre con selecciones únicas. Probado en FF12, Chrome 18 e IE8.

@geoffweatherall Quizás el problema con el cuadro de color es que se está renderizando sobre el menú desplegable Elegido. Pruebe algo como esto para ver si ayuda:

.chzn-drop {
    z-index: 999999 !important;
}

O intente configurar la opacidad del cuadro de color en 0.1 para verificar si puede ver el menú desplegable debajo del cuadro de color.

El otro problema, con las llaves, intentaré encontrar alguna solución. No utilicé la selección múltiple en el proyecto en el que estoy trabajando ahora, así que casi no lo probé. Se centró más en la opción de selección única.

Ok, probé esto y obtuve los menús desplegables visibles, sin embargo, la posición es incorrecta. Están cayendo bastante por debajo del cuadro de texto. Aquí hay un jing que muestra el comportamiento. http://screencast.com/t/c4PCIHC176RX

Hola gil

¡Probé tu versión y está funcionando! ¡Muchas gracias!
Solo hay una pequeña cosa que dejó de funcionar ... Es la opción disable_search_threshold. El campo de búsqueda no desaparecerá.

¿Tiene usted alguna idea?

¡Gracias!

¡No importa! Sin embargo, me las arreglé para arreglarlo yo mismo ... tal vez debería cambiar eso en el código también:

Cambiar:

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.container.addClass("chzn-container-single-nosearch");
    } else {
      this.container.removeClass("chzn-container-single-nosearch");
    }

Para

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.dropdown.addClass("chzn-container-single-nosearch");
    } else {
      this.dropdown.removeClass("chzn-container-single-nosearch");
    }

¿Cuál es el estado de esta bifurcación? ¿Se ha fusionado con el maestro? ¿O todavía está en prueba?

Otro problema ... la bifurcación parece funcionar para mí, pero en Firefox veo el div desplegable en la parte inferior de la página. Parece que la posición izquierda negativa no lo mueve fuera del área de visualización. Quizás se deba a otros estilos que he ... pensado. ¿Alguna idea? ¿Por qué no está configurada la pantalla en ninguno?

Hice una solicitud de extracción hace mucho tiempo para mi solución original, pero fue
nunca aceptado (ni idea de por qué).

Se han sugerido muchos ajustes adicionales en este hilo.
desde entonces, no he jugado con ninguno de ellos todavía y no he comprobado
para ver si alguien tiene una bifurcación que los incorpore (si no hay
uno, alguien debería crear uno, y si lo hay, sería una buena
respuesta a su pregunta.)

El jueves 7 de junio de 2012 a las 6:44 a. M., Bob Archer
[email protected]
escribió:

Otro problema ... la bifurcación parece funcionar para mí, pero en Firefox veo el div desplegable en la parte inferior de la página. Parece que la posición izquierda negativa no lo mueve fuera del área de visualización. Quizás se deba a otros estilos que he ... pensado. ¿Alguna idea? ¿Por qué no está configurada la pantalla en ninguno?

---

Responda a este correo electrónico directamente o véalo en GitHub:
https://github.com/harvesthq/chosen/issues/86#issuecomment -6162299

Los probé todos, y ninguno funcionó para mí, porque tengo varios conjuntos de campos que están ocultos y una forma larga que se desplaza. Entonces, mi solución fue hacer que el menú desplegable esté estático y oculto inicialmente, y se muestre cuando se abre, lo que estira el contenedor principal. Esto funciona en todos mis formularios, incluso si está en la parte inferior de la pantalla.

en Chosen.prototype.results_show:

      this.dropdown.css({
        "top": dd_top + "px",
        "left": 0,
        "display": "block"
      });

En Chosen.prototype.results_hide:

      this.dropdown.css({
        "left": "-9000px",
        "display": "none"
      });

en elegido.css:

.chzn-container .chzn-drop {
  position: static;
  display: none;
}

@gil , solo quiero darte las gracias por tu bifurcación, estaba a punto de dejar de usar Chosen para mi proyecto debido a este error.

Honestamente, estoy bastante sorprendido de que los chicos de la cosecha no vean el defecto inherente a unir una ventana emergente flotante a un contenedor restringido. Incluso independientemente de las reglas de desbordamiento, esa no es una buena idea para una biblioteca pública que no tiene idea de lo que la gente puede estar haciendo con el widget.

¡Hola chicos! Es bueno saber que mi fork está ayudando a algunas personas con este problema ... :)

No sé si planean cambiar el código o fusionarse con algunas de las soluciones propuestas aquí. No sabemos si podemos asumir que esta es la mejor solución para todos los casos. Sigamos probando y tal vez enviemos una solicitud de extracción con todos los cambios.

@geoffweatherall He arreglado el código con algo que creo que te ayudará con el problema del teclado. ¡Dime si funciona! ;)

@PilotBob ¿Todavía tienes el problema de ese jing? Sobre el otro problema, probé example.jquery.html en Firefox 12 y parece estar bien. Tal vez puedas intentar reemplazar todos los left:-9000px que puedas encontrar por display:none . No conozco el código lo suficientemente bien como para decírselo, pero como estoy configurando display:block en results_show() , podría ayudarlo.

@pruimmartin Gracias por su solución y perdón por

gil - no, parece que ya no está sucediendo, y no cambié nada. Espero que haya habido un error js en otro lugar que lo estaba causando. Sin embargo, tengo otros problemas con el elegido y he estado considerando reemplazarlo por algo más. Esto se debe principalmente a la falta de actualizaciones en el maestro.

@PilotBob Estoy considerando este proyecto: https://github.com/ivaynberg/select2
Tienen el mismo problema de desbordamiento, pero creo que planean cambiar en la versión 3.

@gil : su solución funciona muy bien, pero con un ancho de li.search-field permanece fijo en 25px . En otras palabras, cuando cargo su página de ejemplo, los menús se añaden maravillosamente al elemento body , pero el texto del marcador de posición y cualquier escritura están restringidos a 25px ancho. De hecho, parece que el método search_field_scale no existe en absoluto. ¿Me estoy perdiendo de algo?

@rreusser He eliminado el método search_field_scale , ya que solo se usaba para la selección múltiple y para calcular la posición correctamente. Eso ya no era necesario para este tenedor. ¿Qué navegador / versión / sistema operativo estás probando? Para mí, el tamaño del campo de búsqueda es correcto en example.jquery.html .

@rreusser Oye, lo siento. Ahora veo lo que está mal. Intentaré arreglarlo más tarde hoy.

¡No hay problema, @gil! ¡Gracias por la pronta respuesta! Necesito experimentar un poco más, pero también podría ser útil permitir el apego a un elemento arbitrario, que también debería ser bastante trivial, creo. Tengo un cuadro de selección dentro de un div de desplazamiento, y aunque su solución evita el recorte, el menú no se mueve con el div cuando se desplaza. Creo que todo lo que se necesita es un div extra en alguna parte, pero esto requerirá algunos retoques.

@rreusser Revertí ese compromiso y solucioné el problema que estaba tratando de solucionar de manera diferente. ¿Podría intentarlo de nuevo y decirme si le funciona?

Y sobre adjuntar a un elemento diferente, estaba pensando en hacerlo configurable. Pero puede resolver su problema de desplazamiento con una pequeña configuración. Cuando su <select /> no son hijos directos de su div de desplazamiento, intente esto:

$(".your-select").chosen({
    overflow_container: $(".scrolling-div")
});

Pero si el nodo padre de su <select /> era su <div /> , esto no debería ser necesario.

@gil , ¿esta bifurcación se fusionará con la maestra? ¿O todavía está en prueba? También tuve un problema con los controles del teclado en la bifurcación, la tecla de flecha hacia abajo no activa los métodos results_show o results_toggle. Gracias :-)

@myfriendtodd No lo sé todavía, tal vez podría enviar una solicitud de

@myfriendtodd Oye, creo que lo he arreglado. ¿Podría probarlo en su proyecto? ;)

gracias @gil te hará saber cómo resulta. Gracias por toda tu ayuda :-)

@gil Muchas gracias por tu bifurcación. La solución funcionó maravillosamente para mí, ¡increíble!

Sin embargo, estoy usando Kickstrap para diseñar Chosen para que encaje en Twitter Bootstrap. Esto da como resultado que Elegido con esta solución esté muy dañado: el contenido del menú desplegable aparece en la parte inferior de la página, sin estilo: https://skitch.com/dyad/euys2/login . Hasta donde yo sé, todo lo que hace Kickstrap es sobreescribir los estilos elegidos predeterminados.

El archivo LESS para los cambios realizados en el estilo se puede encontrar en https://github.com/ajkochanowicz/Kickstrap/blob/master/extras/chosen/chosen.less : hay algo obvio que su corrección edita que explique por qué esto podría estar pasando?

Muchas gracias de verdad.

Hola chicos,

Estoy trabajando en una nueva versión con un enfoque diferente, en lugar de agregar el menú desplegable al cuerpo. Esta versión es mucho más limpia y, con suerte, reducirá muchos errores, ya que el cambio no es tan grande. ¿Pueden probarlo para ver si funciona? Está en una nueva rama:

https://github.com/gil/chosen/tree/new_version

@conatus ¿Puedes probar con esta versión también? La última versión en la rama "master" tuvo muchos cambios en el archivo css, esta versión solo cambió 3 líneas. Cambie estos en el CSS elegido de Kickstrap:

• Línea 4, cambio de "posición: relativa"; a "posición: estática;".
• La línea 13 cambia de "posición: absoluta"; a "posición: fija;".
• En la línea 128, inserte una nueva línea "display: none;", debajo de "left: -9000px;"

¡Espero que esto funcione! ;)

Además, esta nueva versión está sincronizada con la rama maestra de harvesthq.

Lamento no haber seguido antes, pero llegamos a una parte diferente del proyecto y esto se desvaneció en la distancia muy rápidamente. Sin embargo, lo probaré y te lo haré saber tan pronto como tenga la oportunidad. ¡Muchas gracias por su continuo esfuerzo!

@gil : estoy probando su versión y, aunque funciona muy bien, hay un pequeño problema: cuando se coloca dentro de un elemento de posición fija, desplazarse por la página desplazará el menú desplegable. En realidad, esto también es un problema con el autocompletado de jQuery.

Solo puedo pensar en 2 posibles soluciones para esto:
1) Si elegido se coloca dentro de un elemento de posición fija, el menú desplegable debe colocarse dentro de chzn-container y también debe tener una posición fija. La posición superior debe calcularse mediante la posición fija del contenedor.
2) Vuelva a calcular la posición del menú desplegable mientras se desplaza

La tercera opción es hacer que el menú desplegable sea fijo cada vez que la selección esté en un contenedor de posición fija.

@ragulka @ChiperSoft Veo el problema ... Solo para asegurarme, ¿este jsfiddle está reproduciendo lo que están diciendo? http://jsfiddle.net/QY256/

Intentaré hacer algo al respecto. Hay una nueva opción llamada overflow_container que manejará los problemas de desplazamiento, como puede ver cuando se desplaza solo el div. Pero el problema aquí es que cuando desplaza la ventana, se colocará incorrectamente.

Estaba pensando en cerrar Chosen, cuando algo se desplaza, ya que manejar el desplazamiento causa algunos otros problemas menores (como cuando su <select /> es solo la mitad visible).

@ragulka @ChiperSoft Además, como solución temporal, ¿pueden intentar cambiar la línea 640, dentro del método update_position , desde:

"top": (offset.top + dd_top) + "px",

para:

"top": (offset.top + dd_top - $(window).scrollTop()) + "px", ?

@gil Sí y no: el jsfiddle que proporcionó muestra el problema, pero para mí apareció cuando estaba desplazando el cuerpo (mi elemento fijo no tenía barras de desplazamiento). En Your jsfiddle, el problema parece aparecer cuando me desplazo por el contenido del elemento fijo, pero no cuando me desplazo por el cuerpo.

@ragulka Sé que no es la mejor solución, pero creo que lo he solucionado aquí. ¿Puedes probarlo? Realice el cambio en la línea 640, como dije, y aplique Elegido así:

$(".your-select").chosen({
    overflow_container: $(".your-fixed-div").add( document )
});

Esto debería manejar el desplazamiento en el div y en document , y fijar la posición.

Pero como dije, creo que cambiaré esto más tarde para que Chosen se oculte cuando el usuario se desplaza por algo.

Puede que este no sea un error elegido, pero cambié a select2 como un reemplazo directo de elegido y el problema desapareció sin necesidad de hacer ninguna solución.

Muchas gracias por eso.

En el tiempo intermedio, se actualizó Kickstrap: https://github.com/ajkochanowicz/Kickstrap/blob/beta/assets/Kickstrap/apps/chosen/chosen.css. Su nueva rama funciona maravillosamente, sin embargo, los cambios que sugiere al CSS de Kickstrap no parecen tener el efecto. Lo que pasa es que el menú desplegable ya no aparece. ¿Algunas ideas? Muchas gracias.

Gracias @gil !!! Su sucursal (https://github.com/gil/chosen/tree/new_version) solucionó mi problema con este problema en particular.

Gracias por todos los consejos. Hice algunas modificaciones leves a las sugerencias anteriores para que los menús desplegables funcionen con los modales de Bootstrap v2.1.1 y Chosen v0.9.11. Se necesitaron pequeños cambios para que el archivo .chzn-drop se colocara correctamente una vez que se volvió a abrir después de que se desplazó la página.

Espero que esto ayude a otros.

CSS

.modal .chzn-container .chzn-drop {
  position:fixed;
}

Javascript

Chosen.prototype.results_show = function() {

      var self = this;

      // hide .chzn-drop when the window resizes else it will stay fixed with previous top and left coordinates
      $(window).resize(function() {
        self.results_hide();
      });

      var dd_top;
      if (!this.is_multiple) {
        this.selected_item.addClass("chzn-single-with-drop");
        if (this.result_single_selected) {
          this.result_do_highlight(this.result_single_selected);
        }
      } else if (this.max_selected_options <= this.choices) {
        this.form_field_jq.trigger("liszt:maxselected", {
          chosen: this
        });
        return false;
      }
      dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
      this.form_field_jq.trigger("liszt:showing_dropdown", {
        chosen: this
      });

      if($('.modal.in').length) {
        // when in a modal get the scroll distance and apply to top of .chzn-drop
        var offset = this.container.offset();
        var scrolly = parseInt($(window).scrollTop(), 10);
        scrolly = scrolly < 0 ? 0 : scrolly;
        var toppy = offset.top+ dd_top - scrolly;
        this.dropdown.css({
          "top": toppy + "px",
          "left": offset.left + "px"
        });
      } else {
        // proceed as normal
        this.dropdown.css({
          "top": dd_top + "px",
          "left": 0
        });
      }

      this.results_showing = true;
      this.search_field.focus();
      this.search_field.val(this.search_field.val());
      return this.winnow_results();
    };

Así que estaba jugando un poco con Chosen 0.9.11 e identifiqué los cambios que necesitaba hacer en Chosen ...

Estoy usando Elegido dentro de un diálogo jQueryUI muy modificado que se puede arrastrar y tiene una altura máxima con desbordamiento: desplazamiento.

Para que el Elegido se comporte como quiero, cambié ".chzn-container .chzn-drop" a " position: fixed " y agregué " display: none ". Luego, en "Chosen.prototype.results_hide" agregué " display: none " a "this.dropdown.css" ...

this.dropdown.css({
    "left": "-9000px",
    "display": "none"
});

Y en "Chosen.prototype.results_show" reemplacé el contenido de "this.dropdown.css" por " display: block ".
Para obtener la posición correcta del div .chzn-drop, agregué la función de posición jQueryUI.

this.dropdown.css({
    "display": "block"
}).position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

En "Chosen.prototype.search_field_scale" cambie ...

return this.dropdown.css({
    "top": dd_top + "px"
});

... para ...

return this.dropdown.position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

Ahora solo me queda un problema:

Necesito escuchar los eventos de arrastre de jQuery UI Dialog para cerrar la gota Chosen cuando alguien comienza a mover el cuadro de diálogo. Ya lo logré, pero el código está bastante sucio :-)

¿Existe alguna posibilidad de que la solución no trivial de esta rama https://github.com/gil/chosen/commits/new_version se transfiera a GWTChosen?
GWTChosen es increíble. Sin embargo, en el estado actual, no se puede usar con LayoutPanels en absoluto.

¿Qué tal agregar una nueva característica a la biblioteca Elegida donde la lista se representaría sobre el campo de texto simplemente agregando una clase diferente o nueva? De esta manera, el script no tiene que representar la lista fuera del desbordamiento de envoltura oculto , y probablemente resolvería la mayoría de los problemas que tienen otros. PD: No considero esto como un problema de desbordamiento: hidden hace exactamente lo que se supone que debe hacer. Es más agradable tener una función. Gracias.

+1 A sugerencia de Klikerko.

Al igual que @sillysachin , uso GWTChosen y tengo el mismo problema con LayoutPanels, overflow: hidden y ChosenListBox: /

¿Alguien sabe de un arreglo para esto? @sillysachin, ¿ se te ha ocurrido algo desde que publicaste aquí?

Tnx de antemano :)

Lo hemos parcheado ad-hoc sacando el div desplegable del contenedor principal. Desafortunadamente, estoy abrumado por el aplastamiento de la liberación y me tomaré un tiempo para limpiar el parche antes de enviarlo aquí.

Este compromiso en https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983 lo corrige razonablemente bien. Está relativamente actualizado, pero lo hice solo para jQuery.

@robmcguinness Tuve que modificarlo un poco para que funcionara. Sin embargo, crea un error. donde no se puede cerrar el menú desplegable.

 Chosen.prototype.results_show = function() {

 this.dropdown.css({
      "display": 'block'
    });

  var dd_top;
  $(window).resize(function() {
    this.results_hide();
  });

  if (this.is_multiple && this.max_selected_options <= this.choices_count()) {
    this.form_field_jq.trigger("chosen:maxselected", {
      chosen: this
    });
    return false;
  }

  dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
  this.container.addClass("chosen-with-drop");
  this.form_field_jq.trigger("chosen:showing_dropdown", {
    chosen: this
  });

  if($('.modal.in').length) {
    // when in a modal get the scroll distance and apply to top of .chzn-drop
    var offset = this.container.offset();
    var scrolly = parseInt($(window).scrollTop(), 10);
    scrolly = scrolly < 0 ? 0 : scrolly;
    var toppy = offset.top+ dd_top - scrolly;
    this.dropdown.css({"top": toppy + "px","left": offset.left + "px"});
  } else {
    // proceed as normal
    this.dropdown.css({
      "top": dd_top + "px",
      "left": 0
    });
  }




  this.results_showing = true;
  this.search_field.focus();
  this.search_field.val(this.search_field.val());
  return this.winnow_results();
};


Chosen.prototype.results_hide = function() {
  if (this.results_showing) {

    this.dropdown.css({
      "display": 'none'
    });

    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  return this.results_showing = false;
};

y tuve que agregar un ancho al CSS, de lo contrario, iría al 100% del ancho del sitio.

.modal .choen-container .choen-drop {
posición: fija;
ancho: 300px;
}

Pude solucionar los problemas con el código anterior. Compatible con la versión 1. Sin embargo, el mío es más una plataforma para que funcione. pero hasta ahora está funcionando bien. El último problema que veo es cambiar el tamaño del navegador, el mod actual no funciona.

¿Alguien sabe si alguna de las posibles soluciones a este problema se fusionará pronto en la rama maestra? Esto es un factor decisivo para mí = /.

Pasamos a usar Select2 ... también tiene más funciones.

El jueves 19 de diciembre de 2013 a las 11:24 a. M., Daniel Hoffmann Bernardes <
[email protected]> escribió:

Cualquiera sabe si alguna de las posibles soluciones a este problema va a ser
pronto se fusionó con la rama maestra? Esto es un factor decisivo para mí = /.

-
Responda a este correo electrónico directamente o véalo en Gi
.

Gracias PilotBob, ¿se elige ya no se mantiene? Si es así, es posible que desee actualizar la documentación.

No es mi proyecto. Yo "era" un usuario de él. Debido a varios problemas que encontramos
una alternativa.

El jueves 19 de diciembre de 2013 a las 11:53 a. M., Daniel Hoffmann Bernardes <
[email protected]> escribió:

Gracias PilotBob, ¿se elige ya no se mantiene? Si es así, es posible que desee
para actualizar la documentación.

-
Responda a este correo electrónico directamente o véalo en Gi
.

@DanielHoffmann Chosen todavía se mantiene activamente. Select2 era originalmente una bifurcación de Chosen, pero desde entonces se ha alejado lo suficiente como para ser algo propio.

Chosen se mantiene intencionalmente simple: estaba destinado a ser un reemplazo directo de select s, por lo que evita muchas características y configuraciones complicadas. Select2 tomó la ruta opuesta y agregó muchas, muchas funciones y configuraciones; depende de usted cuál de esas filosofías valora más.

En cuanto a este problema _específico_, lamentablemente es solo eso: un problema, no una solución. Si alguien envía una solicitud de extracción para solucionarlo, se considerará la fusión. Sin embargo, OSS no es el trabajo principal de ninguno de los encargados de mantenimiento: trabajan en él cuando pueden en sus trabajos de tiempo completo. Por lo tanto, como siempre, "se aceptan solicitudes de extracción" si desea intentar solucionarlo usted mismo.

¿Cuándo se solucionará este problema? ¡Es tan antiguo pero fundamental para muchos proyectos! por favor, diríjalo lo antes posible.

¡Gracias!

hay muchas correcciones en las bifurcaciones elegidas, así que ¿por qué no utilizar una de esas correcciones?

@domnulnopcea Nunca ha habido un RP que haya

Tengo una solución para esto, no es una bifurcación limpia, está enterrada en otro repositorio y solo está en la versión de jQuery. (No, no estoy orgulloso de mi mismo)

Funciona agregando el elemento desplegable al elemento del cuerpo y estableciendo su posición absolutamente cuando la página se desplaza o cambia de tamaño. También determina si el menú desplegable debe estar por encima o por debajo del campo y qué tan alto debe ser (para que no esté cortado por la página).

Si esto es algo en lo que está interesado en fusionarse (y de hecho no hay otras bifurcaciones), intentaré encontrar algo de tiempo para desempolvarlo y crear una solicitud de extracción.

https://gist.github.com/msaspence/11032254

@stof ¿qué pasa con https://github.com/tompaton/chosen?

cometer: https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983

@domnulnopcea esto nunca se ha enviado para su inclusión en el propio Elegido AFAIK. No podemos buscar en todas las bifurcaciones para examinar todo el trabajo realizado en él. Estamos trabajando en Chosen en nuestro tiempo libre, por lo que no podemos dedicar semanas a examinar miles de confirmaciones en muchos repositorios para ver qué están haciendo.

@stof agradecemos mucho su trabajo. Lo uso en mi propio proyecto (www.ubirimi.com) Pero ahora que le he dado un enlace a una confirmación, ¿sería tan amable de examinar esos cambios y aplicarlos al repositorio oficial elegido?

muchas gracias

Dado que no se puede aplicar directamente (el código ha cambiado mucho desde hace 11 meses), requerirá algo de tiempo (y también requiere probarlo para asegurarse de que funcione correctamente). Entonces no puedo hacerlo ahora

@stof gracias por pensar en hacerlo! ¡Lo aprecio!

@domnulnopcea, si es tan importante para ti, ¿por qué no

@msaspence ¡ Lo haría pero no soy un desarrollador frontend! No estoy muy acostumbrado a JS y todas esas cosas del lado del cliente.

Pasamos a Select2 ya que permite la recuperación de datos AJAX. Es posible que quieran verlo.

Creo que todos se han mudado a Select2 en esta etapa, ¿hay alguna ventaja en usar Chosen?

¡Para mí funcionó perfectamente la solución PilotBob!

Agregué esto en mi código:

$ (documento) .ready (function () {
$ (". chzn-select"). on (" liszt: show_dropdown ", function () {
$ (esto) .parents ("div"). css ("desbordamiento", "visible");
});
}

¡¡¡Muchas gracias!!!

El problema es que la posición de la lista de opciones es absolute , no expande el contenedor principal. Una solución que propongo es cambiarlo a float: left | right porque puede expandir el padre, si después agrego un objeto DOM con clear:both

Resolví esto (usado con el diálogo jquery-ui) con lo siguiente en mi css:

#clone-budget-dialog {overflow: visible;}

@grduggan ¿puedes proponer una solución en el CSS de la biblioteca?
Creo que tu solución es válida. ¡Haga una solicitud push!
+1

Nunca había hecho eso antes. Tendré que investigar. Sería bueno tenerlo en css.

Veo un problema similar cuando el cuadro de selección está cerca del final de la página. El cuadro de selección nativo resuelve esto simplemente abriéndose en lugar de desplegarse. ¿Por que no?

desbordamiento: visible; en el div del contenedor funcionó para mí! Gracias.

no siempre necesita el desbordamiento: oculto cuando usa flotadores, también puede borrar los flotantes usando esto en su padre (elimine el desbordamiento: oculto):

&:antes de,
&:después {
contenido: " "; // 1
pantalla: mesa; // 2
}
&:después {
Limpia los dos;
}

así es como funciona la clase clearfix en bootstrap

Modifiqué el CSS (ver más abajo). Parecía funcionar para mi escenario.

.choen-container .chosen-drop {
posición: relativa; / _Cambiado de absoluto para evitar el corte por desbordamiento en el contenedor_ /
Top 100%;
izquierda: -9999px;
índice z: 1010;
ancho: 100%;
borde: 1px sólido #aaa;
borde superior: 0;
fondo: #fff;
sombra de cuadro: 0px 4px 5px rgba (0,0,0,0.15);
}

.chosen-container .chosen-results {
color: # 444;
posición: relativa;
overflow-x: oculto;
desbordamiento-y: automático;
margen: 0 4px 4px 0;
relleno: 0 0 0 4px;
altura máxima: 200px; / _Cambiado de 240px_ /
-webkit-overflow-scrolling: toque;

/*Added to clearfix because we changed the chosen-drop to a relative position*/
&:before,
&:after {
    content: " "; // 1
    display: table; // 2
}
&:after {
    clear: both;
}

}

Envolver la selección (y Elegido) en un elemento fieldset también puede producir efectos no deseados en los navegadores webkit (es decir, cortar cuando un padre tiene overflow: hidden ).
Esto se debe a que webkit agrega min-width: -webkit-min-content; a los conjuntos de campos de forma predeterminada.

Esto resolvió mi problema:

fieldset { min-width: 0; }

@chassq hmm, tu solución no me funciona, .. mira esta captura de pantalla:

Tengo un div alrededor de las selecciones elegidas con

  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;

Gracias a todos los que ya dieron la solución con position: fixed

Aquí hay un jsfiddle con la solución (sobrescribe las clases CSS elegidas):
http://jsfiddle.net/jwbL8utx/1/;)

Todavía tengo 1 problema, cuando me desplazo hacia abajo (usando la altura máxima), el elegido tiene un desplazamiento, como puede ver aquí al desplazarse hacia abajo y abrir el segundo elegido:

http://jsfiddle.net/jwbL8utx/2/

Así es como lo resolví:

http://jsfiddle.net/0w4a4dq5/1/

Esta solución no requiere que cambie ningún otro elemento además del menú elegido. Notará que oculta el menú nuevamente si lo 'quita el cursor', pero esto es según mi requisito. Si desea mantenerlo en la parte superior todo el tiempo, puede vincular un evento de desplazamiento a su contenedor div y activar el evento ' elegido: close.chosen '.

@typologist Gracias por su excelente solución.
Sin embargo, hay dos errores menores en su JS que me gustaría mencionar:
En la línea 51, debería ser

'top': y - $(document).scrollTop()

de lo contrario, la ventana emergente puede desplazarse en determinadas condiciones

En la línea 23, en lugar de usar

$('.chosen-container')

para vincular los eventos, creo que sería mejor usar

$chosenSelect.next('.chosen-container')

para evitar múltiples enlaces si la función se llama más de una vez con diferentes widgets elegidos () para corregir.

por favor dime, ¿hay alguna solución para Chosen v1.4.2?

.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}

overflow-y: visible

Agregue esto al div principal que contiene el diseño. En mi caso, era un sub div de diálogo modal que tenía _overflow-y: auto_ y reemplazarlo con _overflow-y: visible_ funcionó para mí.

¿Existe ya una solución a este problema?

Este proyecto tiene tu respuesta:
http://jsbin.com/finufihaji/edit?html

Buscar un poco y hacer pruebas es la solución más básica.

Tuve que anular .chosen-drop y .chosen-results y establecer una altura fija para ambos para que todas las opciones sean seleccionables y no se vean afectadas por la directiva de desbordamiento div principal

Al menos esto funciona para mí y la mayoría de los campos elegidos solo tienen 3 o 4 opciones. Solo 1 (el que está oculto) tiene alrededor de 12 y puede crecer en un futuro próximo.

Apliqué lo siguiente al div padre que tenía el desbordamiento: oculto

.profile-content { /* Hack to stop profile-content from cropping Chosen dropdown */ padding-bottom: 100px; margin-bottom: -100px; }

Fuente: Stack Overflow

@doowruc ¡ Gran truco!

¿Existe algún método para adjuntar el menú desplegable elegido a un destino específico, de modo que podamos adjuntarlo al cuerpo del documento en lugar de a un cuadro de diálogo? de esta manera, el elegido fluye fuera del diálogo y no está contenido en él?

.ui-dialog-content{
    overflow:visible !important;
 }

Trabajó para mi.

Sé que todavía estaba luchando con esto. Aquí hay un violín que muestra una opción para mover el elemento hacia el cuerpo y configurar el posicionamiento absoluto de manera confiable, incluso con desplazamiento.

https://jsfiddle.net/phil_ayres/gvn8bkaL/

https://github.com/R1p8p8e8r/chosen
Creo que mi solución te ayudará