Chosen: si la selección está inicialmente oculta, no funciona

Sí, deberías parchear el guión del café. También estoy a favor de la capacidad de configurar elementos ocultos.

+1 se encontró con este problema hoy

+1 como hice yo

Como solución alternativa, puede establecer el ancho del div creado con una bandera !important :

#my_select_chzn {
  width: 100% !important;
}

En realidad, esto te acercará a donde debes estar. Los anchos no son perfectos, pero todo será visible.

#my_select_chzn {
  /* This is the only width setting you'll need to change. */
  width: 100% !important;
}
#my_select_chzn .chzn-drop {
  width: 100% !important;
}
#my_select_chzn .chzn-drop .chzn-search {
  width: 99% !important;
}
#web_template_exploit_name_chzn .chzn-drop .chzn-search input {
  width: 98% !important;
}

Una versión anterior de Chosen realmente probó para ver si el ancho del campo del formulario se estableció a través de css. Si es así, no usó el cálculo de ancho. Creo que prefiero este método de corrección a agregar 30 líneas de código para probar elementos ocultos. ¿Algo como esto funcionaría para ti?

Establecer el ancho:

  <select style="width:350px;" class="chzn-select">

JS prueba primero el ancho del conjunto:

  <strong i="10">@f_width</strong> = if @form_field_jq.css('width')? then parseInt(@form_field_jq.css('width'),10) else @form_field_jq.width()

@pfiller hay un pequeño error en tu código. Si el estilo en línea tiene un ancho en cualquier unidad que no sean píxeles (como em), el código lo interpretará como píxeles. ver línea 56 en elegido.jquery.coffee

Creo que la gente se quejará continuamente de ello y, en última instancia, deberá agregar esas 30 líneas de código.

Hola @pfiller , eso no funciona. Tanto width () como css ("width") devuelven 0 para los elementos ocultos. Estoy usando la técnica getHiddenDimensions y está funcionando bien.

por cierto, debes usarlo tanto para f_width como en get_side_border_padding

+1 para esto.

Gran parte de la lógica del sitio en el que estoy integrando Chosen se basa en que algunas selecciones se ocultan en la primera carga, por lo que tenemos todo tipo de problemas con esto.

+1 también. Deben incorporarse controles de visibilidad.

: +1:: +1:: +1:

¿Qué pasa con la solución en la que el ancho del menú desplegable no se establece permanentemente en el primer inicio y simplemente se cambia de tamaño al ancho del cuadro de texto cuando se abre? De esa manera, no tendrá que tocar el ancho de la entrada, solo asuma que está configurado con css y léalo cada vez que abra el menú desplegable.

+1 para esto. Decidí convertir Elegido en un tipo de campo para ExpressionEngine CMS, pero los diseños de publicación de EE permiten que los campos se oculten al cargar la página.

No estoy seguro de si esto está relacionado, pero en el caso de EE sería mejor si el ancho fuera fluido, o simplemente fuera siempre el 100% de su elemento contenedor ...

http://www.alistapart.com/articles/now-you-see-me/

Me encontré con este ... todavía está sucediendo en la última versión

+1
Este error bloquea el uso del complemento Elegido para aplicaciones internas en Netflix

: +1: sobre este tema, encontré este problema hoy

Puede ocultar su contenido con: posición: absoluta; izquierda: -999em;
De esta manera, los lectores de pantalla y Google también pueden "leerlos", y su menú desplegable Elegido SERÁ visible cuando lo muestre nuevamente.

Mi solicitud de extracción soluciona este problema, pero al igual que la otra y muchas de las elegidas, se están ignorando. Este proyecto tiene demasiados contribuyentes con una base de código demasiado pequeña.

DelvarWorld, gracias por tu parche. Esto me ha estado molestando, y estaba a punto de implementar una solución similar y pensé en verificar si alguien ya lo había hecho.

Implementaré esto en el código de producción poco después de probarlo.

@DelvarWorld ¿a qué solicitud de extracción te refieres? Veo una solicitud de extracción abierta suya y no aborda este problema.

@pfiller El que se enumera anteriormente en este hilo, https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

Más importante que usar el CSS es usar el ancho "actual" del elemento al representar los resultados, en lugar de usar un ancho almacenado en caché incorrectamente de la construcción de Chosen.

Ha habido muchos cambios y no estoy muy seguro de cuál es la mejor manera de fusionarlos yo mismo. ¿Tendrá una versión fusionada en breve?

@bewest mi solicitud de extracción hace eso, cada vez que se muestra el menú desplegable, coincide con el ancho del elemento

@delvarworld Lo sé, solo asegurándome de que se haga la distinción correcta.

¿Puedes intentar actualizar tu rama de ancho automático con HEAD? Intenté fusionar desde una caja similar a fines de agosto, pero el cuadro de entrada ahora tiene el ancho incorrecto (es demasiado ancho, desbordando el ancho del contenedor elegido).

Estoy echando un vistazo, pero también ha habido una reorganización ... el constructor se ha eliminado a favor de los métodos setup y finish_setup. Tampoco estoy familiarizado con coffeescript, por lo que su progreso en la fusión podría ser más rápido que el mío y enviar una solicitud de extracción de mi ayuda, ya que parece haber mucho interés en este tema.

En realidad, mi rama se ha desviado más allá de ese cambio y, finalmente, dejé de trabajar en la versión prototipo. Es culpa mía, y creo que en este momento no se puede fusionar.

@DevarWorld Sí, necesita ser reelaborado un poco para que algunos bits entren en la implementación abstracta. Esto debería facilitar el mantenimiento de las diferencias entre prototype y jquery.

¿Estarías dispuesto a intentarlo de nuevo?

Un golpe de cortesía ... ¿Alguien está trabajando en esto?

Elegido no funciona para mí ya que oculta mi selección y luego no puede calcular el ancho. Tengo que hackearlo estableciendo arbitrariamente un ancho en cada uno de los componentes chzn en CSS. Esto no parece como se supone que funcione, y realmente ni siquiera parece normal como lo hace en los sitios web en los que lo he visto.

También me encontré con este problema. Resulta que el método elegido para obtener el ancho de un elemento está roto en una versión anterior de jquery (lo siento, pero no tengo los números de versión exactos). Como se señaló anteriormente, el error era cuando un elemento no es visible, el ancho devolvía 0. Este error está muy bien documentado y hay muchas formas de evitarlo.

La solución para nosotros fue simplemente actualizarnos a la versión más reciente de Jquery. Sí, tuvimos que parchear y probar el código antiguo que usaba jquery, pero a largo plazo soluciona muchos problemas y reduce la necesidad de pequeños trucos en todo su js / css.

Estoy instalando el último jquery que está empaquetado en los rieles jquery gem y jquery-ujs. ¿Supongo que esto todavía es demasiado viejo?

Sí, sería bueno tener un número de versión real. Puedo confirmar que 1.6.2 es
demasiado viejo también.

El miércoles 16 de noviembre de 2011 a las 11:23, Kevin Elliott <
[email protected]

escribió:

Estoy instalando la última jquery que está empaquetada en la gema jquery de rieles
y jquery-ujs. ¿Supongo que esto todavía es demasiado viejo?

@RoyJacobs newest actualmente es 1.7 ya que ha sido lanzado.

@RoyJacobs Puedo confirmar que estamos usando 1.6.4 sin problemas.

Esto es extraño. Sí, la gema jquery-rails está usando jQuery 1.7. Pero todavía no me funciona.

Puede ver que no se está renderizando con un ancho. La inspección muestra que todos los anchos calculados son 0px. Esto ocurre incluso si configuro .chzn-select para que tenga un ancho en CSS o directamente en el parámetro de estilo de la etiqueta de selección.

https://skitch.com/kevinelliott/gjufg/winetribe
https://skitch.com/kevinelliott/gjufp/winetribe

Ciertamente molesto. Parece que la selección se muestra en pantalla: ninguna (supongo que a partir del javascript elegido), y solo puedo imaginar que no es capaz de calcular el ancho correctamente.

¿Pensamientos?

Realmente desearía poder hacer que esto funcione en CUALQUIER circunstancia (incluso si tengo que forzarlo). Nada parece funcionar. Me veré obligado a abandonar esto por completo (y ciertamente no querré lidiar con estas cosas rotas nuevamente).

Asegúrese de que su selección tenga algo de CSS aplicado, hoja de estilo o en línea. Si lo hace con la hoja de estilo, significa que debe inyectar el elemento en el DOM antes de llamar a selected ().

Pero estoy de acuerdo en que hacer esto bien es muy difícil. Realmente me gustaría poder aplicar un ancho a la selección elegida a través de CSS. Una clase, un ancho, px o%.
Entonces mi CSS se vería así

.example select, .example .chzn-smth {
ancho: 50%;
}

Y esto aplicaría el ancho correctamente sin importar cómo, cuándo o dónde llame a elegido.

Sin embargo, lo he probado en línea y a través de una hoja de estilo sin cambios en el comportamiento.

Problema bastante sustancial para las cajas de luz y los acordeones. ¿Alguien está trabajando en un parche?

¡No creo que nadie lo sea! Estoy sorprendido porque no entiendo cómo esto es útil para nadie. Ni siquiera estoy ocultando artificialmente mi contenido. La llamada elegida () parece estar haciéndolo. Tan extraño.

@kevinelliott Creo que aquellos que tenían este problema han seguido adelante o han encontrado una solución. Como dije, en nuestro caso fue simplemente una cuestión de actualizar jquery. Tenga en cuenta también que hemos diseñado nuestroelemento para tener un ancho de 224px y establecemos 'display: none;' directamente en el elemento y no en una hoja de estilo.

Espero que esto sea útil para usted y que pueda hacerlo funcionar.

Gracias Richard. Actualicé mi jQuery y eso no ayudó. Lo extraño es que no estoy ocultando mi elemento seleccionado. Elegido lo esconde. Así que ni siquiera estoy seguro de lo que está pasando.

@kevinelliott Np. Tengo curiosidad, ¿estás estableciendo el ancho de tuelemento en absoluto? Si es así, ¿utiliza porcentaje o píxeles?

Yo soy. Lo estoy configurando con píxeles. Intenté configurarlo en el elemento directamente con el atributo de estilo, y también lo probé en CSS.

@kevinelliott Para ser honesto, estoy un poco perdido. Las únicas sugerencias restantes que tengo es 1) envolver el elemento seleccionado en un elemento (hacemos esto, y nuestro trabajo funciona bien), y 2) recorrer la biblioteca elegida para averiguar en qué punto elegido está ocultando su elemento seleccionado ... También tuve que hacer esto cuando nos encontramos con nuestros problemas.

Lo siento, no pude ser de más ayuda.

Tengo un caso, que incluso con un ancho fijo en seleccionar el elegido crear un ancho: 0px.
No puedo entender por qué, no funciona en esta situación y funciona en otras ...

@tiagobrito : Tengo exactamente el mismo problema y nunca he podido resolverlo, arreglado o no.

@RichardBlair Gracias por tu ayuda. Si piensas en algo más, háznoslo saber :)

+
mismo problema, por favor, arréglalo

@tiagobrito , @dhampik ¿puedes armar una pequeña idea que demuestre el problema?

@bewest ¡Ya me
El próximo lunes te diré la versión correcta de jquery que me causa el ancho: 0px

@bewest también confirmo,
que las versiones antiguas de jquery (supongo, anteriores a 1.6.4)
estropear el diseño de select, que inicialmente está oculto
Aquí hay 2 violines:
diseño desordenado (antiguo jquery): http://jsfiddle.net/dhampik/2E9fG/
diseño correcto (nuevo jquery): http://jsfiddle.net/dhampik/Rs9Z3/

Gracias a Dios, la versión de jquery se actualizó con la nueva versión próxima de Yii framework)

Tengo este problema cuando intento integrar Chosen en Trac. Las casillas de selección iniciales en el formulario de propiedades de un ticket tienen un ancho de 0. Las propiedades están ocultas por defecto y se pueden expandir haciendo clic en un enlace. jQuery v1.7.1

Actualización: solucioné el problema ya que al menos el truco CSS mencionado en la publicación del blog foliotek no funcionaba con jQuery 1.7.1. Todavía no probé el enfoque JS.

Mi solución (para Trac):

$("#modify").parent().removeClass('collapsed');
$("#field-test").chosen();
$("#modify").parent().toggleClass('collapsed');

para aquellos que usan jQuery <= 1.7.1

Trabajé alrededor de este problema usando jQuery Actual
Se cambió elegido.jquery.js # 301 de
this.f_width = this.form_field_jq.outerWidth();
para
this.f_width = this.form_field_jq.actual( 'outerWidth' );

// editar thx @koenpunt para el comentario 1.7.2

@midday De acuerdo con el archivo README de

La versión anterior de jQuery (> = 1.7.1) tiene problemas para encontrar el ancho / alto de los elementos DOM invisibles.

@midday, gracias por descubrir que, después de implementar el complemento real, solucionó el problema con elegido

Todavía tengo este problema, ¿alguna idea de cómo solucionarlo?

Lo mismo sigue siendo un problema: no puedo creer que esto haya estado sucediendo durante años ...

También me he encontrado con este problema. Me encantaría recibir ayuda.

Este truco de CSS parece funcionar:

/* Fix 100% width */
.chzn-container, .chzn-drop, .chzn-drop .chzn-search, .chzn-drop .chzn-search input {
  width: 100% !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width */
.chzn-container { width:250px !important; }

@gyopiazza. Me solucionó el problema. Gracias.

FWIW He descubierto que establecer un ancho mínimo (incluso sin! Importante) en la entrada .chzn-container, .chzn-drop y .chzn-search también funciona para selecciones inicialmente ocultas.

Mi solución

css:

.chzn-container, .chzn-drop {
    width: 100% !important;
}

html:

en lugar de establecer el ancho en el elemento de selección, elijo agregar un div contenedor al elemento de selección original y establecer el ancho del contenedor.

Chosen ahora ofrece una opción para inicializar con un ancho establecido que anula cualquier intento de cálculo. Esta es probablemente una solución alternativa satisfactoria para la mayoría de los casos de uso en los que la selección está oculta en el punto de inicialización:

$("select").chosen({ width: '50%' });
$("select").chosen({ width: '200px' });
$("select").chosen({ width: '15em' });

Creo que esta solución es probablemente la que vamos a hacer para solucionar este error. Realmente quiero evitar incluir código que mueva la selección fuera de la pantalla para medir, ya que agregaría más complejidad.

¿Alguien tiene algún problema para cerrar este error basado en esta solución?

Estaba usando la versión 0.9.8 y mis selecciones ocultas funcionaban normalmente. Hoy he actualizado la versión 0.9.14 y dejaron de funcionar. Estaba usando la versión minificada. Cuando cambio a la versión normal, todo vuelve a funcionar bien (elegido.jquery.js 0.9.14). ¿Es normal? ¿Es un error en el proceso de minificación?

Ninguno de los dos ocultos no me funciona en jQuery min o en tamaño completo 0.9.14.

La nueva opción 'ancho' funcionó para mí. Trabaje, al menos, para las nuevas entradas elegidas que anteriormente estaban ocultas.

@trisweb Este es un proyecto de código abierto y la hostilidad no es bienvenida aquí. Hay mucha gente aquí que ha dedicado mucho tiempo y energía para hacer de Chosen lo que es hoy. Intente contribuir a la mejora del proyecto o absténgase de comentar. Gracias.

@kenearley Soy plenamente consciente de la etiqueta de código abierto y debería haber diseñado mi comentario para que sea más eficaz. Lo siento por eso.

Dicho esto, realmente creo que a veces necesitas que alguien grite por encima de todo el ruido.

Propongo que un valor cero para el ancho de cualquier elemento elegido no es lógico, y se debe idear algún método confiable mediante el cual se determine el ancho correcto. De lo contrario, se debe utilizar un valor predeterminado razonable y, por muchas razones que deberían ser evidentes, cero no es un valor predeterminado razonable.

Puede ser un problema difícil, razón por la cual este error ha existido durante tanto tiempo, pero estoy seguro de que hay alguna solución. Personalmente, no creo que el nuevo atributo 'ancho' resuelva el problema, ya que esto todavía se basa en la configuración más que en la convención y, por lo tanto, podría resultar en un ancho cero no funcional elegido en el caso predeterminado.

Dicho esto, realmente creo que a veces necesitas que alguien grite por encima de todo el ruido.

No. No es necesario 'gritar por el ruido'. Si alguien se siente lo suficientemente convencido sobre cómo se debe escribir el código, puede ofrecer una solicitud de extracción o bifurcar el repositorio y cambiar según lo desee.

Dicho esto, agradezco su seguimiento y estoy de acuerdo en que la solución actual no es la ideal. A medida que avancemos, buscaremos mejores soluciones y apreciaríamos enormemente las solicitudes de extracción por parte de cualquiera que tenga interés en que esto cambie.

@kenearley No estoy de acuerdo con sus opiniones sobre la retórica, pero, por supuesto, el código siempre habla más que las palabras. Este es un problema irritante para nosotros en este momento, por lo que es posible que se presente una solicitud de extracción si encuentro una buena solución.

: +1: ¡para una solución!

He tenido el ojo puesto en Chosen durante casi dos años, y sigue siendo la mejora de interfaz de usuario más elegante y selecta que existe. Pero este problema oculto sigue siendo un factor decisivo y el 100% de ancho no es una solución.
+1 para solucionar este problema. ¡Vaya equipo elegido!

+1 para arreglar

Además de la solución oficial que permite a la persona que llama establecer el ancho mediante programación, también sugeriría una solución decente, basada libremente en el siguiente hilo:

http://stackoverflow.com/questions/1841124/find-the-potential-width-of-a-hidden-element

La solución alternativa básicamente se basa en esta función:

// to be placed anywhere before the jquery.chosen initialization
    var getHiddenOffsetWidth = function (el) {
    // save a reference to a cloned element that can be measured
    var $hiddenElement = $(el).clone().appendTo('body');
    // calculate the width of the clone
    var width = $hiddenElement.outerWidth();
   // remove the clone from the DOM
   $hiddenElement.remove();
   return width;
};

Que luego es llamado por el siguiente mod del código jquery.chosen (a partir de 1.0.0):

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + (($(this.form_field).is(":visible"))
            ? this.form_field.offsetWidth
            : getHiddenOffsetWidth(this.form_field)) + "px";
    }
};

Consulte también el n. ° 795 para obtener más detalles sobre esto.

Una solución rápida. En lugar de ocultar su select haga $(elem).chosen(options) y luego $(elem).hide() es decir, primero cree el elemento elegido y luego ocúltelo. De esa forma se retiene el width .

¿No está arreglado todavía, 3 años abierto?

+1 para esta corrección

¡La versión 0.9.8 no tenía este error! solías llamar a jquery outerWidth para obtener el ancho, ahora usas HTML offsetWidth, que rinde a cero ...

Creo que quiere decir que es una regresión, lo cual es prometedor. ¿Hubo un
razón para cambiar el método jQuery?

@pfiller Estaba teniendo este problema al usar jQuery 1.10.2 y su solución $("select").chosen({ width: '50%' }); funciona muy bien para mí. Esta es una solución viable para mis casos de uso.

Utilizo $(this.form_field).outerWidth() para obtener el ancho de compensación, debajo del código completo:

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + $(this.form_field).outerWidth() + "px";
    }
};

+1 Realmente necesito esta solución. Oculto un formulario de forma predeterminada y el usuario debe hacer clic en un botón para mostrarlo. Como está oculto, no está configurando correctamente el ancho de mis selecciones

@henesnarfel : es posible que desee intentar usar la solución alternativa que @pfiller publicó aquí: https://github.com/harvesthq/chosen/issues/92#issuecomment -18163306

golpe, el problema sigue ahí. Debería haber una solución incorporada para esto. Yo haría +1 en eso.

La única solución que se me ocurrió fue ir a la línea 455 (al menos en mi editor), que devuelve el siguiente código de la función container_width :

return "" + this.form_field.offsetWidth + "px";

y lo reemplazó con

return "" + $(this.form_field).outerWidth() + "px";

El problema desapareció.

@ayyash no soluciona el problema por completo. Simplemente lo hace mejor que el ancho 0.

Para mí, esto funcionó (complete sus propios tamaños por placer):

/* Fix  width bug */
.chosen-container, .chosen-drop, .chosen-drop .chosen-search, .chosen-drop {
  width: 220px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Input Box has to be slightly smaller, don't know why and I don't care. */
.chosen-search input {
    width: 210px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width of the whole thing */
.chosen-container { width:220px !important; }

Gracias

@Thinklabsnk Gracias, buena y rápida solución.

EDITAR: Esto solo funciona si todos los elementos seleccionados tendrán el mismo ancho.

Aquí está mi solución para esto, basada en algunas de las otras sugerencias. Clona las entradas ocultas y las agrega al cuerpo para medir el ancho, pero también establece la visibilidad de los clones como ocultos antes de agregarlos, para que no se muestren en la pantalla.

Encuentre esta línea de código en selected.jquery.js (línea 455 en mi versión):

        return "" + this.form_field.offsetWidth + "px";

y reemplácelo con esto:

        var calculatedWidth = this.form_field.offsetWidth;
        // Fix for zero width on hidden inputs.
        if (0 == calculatedWidth) {
          var clone = this.form_field_jq.clone();
          clone.css("visibility", "hidden");
          clone.appendTo('body');
          calculatedWidth = clone.offsetWidth;
          clone.remove();
        }
        return "" + calculatedWidth + "px";

Espero que ayude.

@danjjohnson ¡ Gracias, eso funcionó!

Lo único es que tuve que cambiar:

clone.offsetWidth; 

para

clone.outerWidth();

Por alguna razón, clone.offsetWidth me estaba dando un valor indefinido.

Atentamente,

Este error ocurre en Firefox, nunca lo pruebes en Chrome u otros.

1ra imagen (arriba)
El ancho del conjunto elegido ya que tiene barra de desplazamiento mientras que no la tiene. Este es un resultado incorrecto.

2da imagen (en el medio)
Se eligió establecer el ancho ya que tiene una barra de desplazamiento como la primera imagen, pero esta vez tiene una barra de desplazamiento que es correcta.

Tercera imagen (abajo)
Así es como debería ser la primera imagen mientras no tiene barra de desplazamiento. En esta prueba se configuró el ancho elegido en width: 100% !important

: thumbsup: para @danjjohnson 's con arreglo @johnmerced' s modificación

Tengo otra solución, simple y funciona. El punto en no permite que el ancho se convierta en cero:

   // don't let the width to be "0"
   $(".chosen-select,.chosen-multiple-select").each(function(){
        if($(this).width() == 0){
            $(this).width(240);
        }
    });
    // call it :)
    $(".chosen-select,.chosen-multiple-select").chosen({allow_single_deselect:true});

Hola,
mi soution para este problema es una combinación de las soluciones publicadas hasta ahora (elegida 1.2.0):

    AbstractChosen.prototype.container_width = function () {
        if (this.options.width != null) {
            return this.options.width;
        } else {
            //Original:
            //return "" + this.form_field.offsetWidth + "px";
            //Workaround:
            if(this.form_field.offsetWidth > 0) {
                return "" + this.form_field.offsetWidth + "px";
            } else {
                if($(this.form_field).css('width')) {
                    return parseInt($(this.form_field).css('width'),10) + "px";
                } else {
                    return "" + $(this.form_field).outerWidth() + "px";
                }
            }
        }
    };

Simplemente defina un ancho CSS estático en px para las selecciones ocultas.

Aún se requiere una solución general.

El problema aquí es que si cambia el tamaño de la ventana, la selección siempre aparece con el mismo tamaño que se inicializó. Creo que una mejor solución sería cambiar el tamaño de la selección cuando se muestra o cuando se cambia el tamaño de la ventana, en lugar de adivinar el ancho que debería tomar en la inicialización cuando está oculta.

¿No hay forma de cambiar dinámicamente el tamaño del objeto elegido? Como sé cuándo cambiar el tamaño (cambio de tamaño del evento o onShow o similar), podría ser una solución. ¿Existe una función API para cambiar el tamaño del objeto elegido? ¿O reinicializar de alguna manera?

: +1: para una solución. Me encontré con esto hoy

: +1: Perdí _way_ demasiado tiempo rastreando esto.

Todavía tengo un problema con el tamaño en los modales. ¿Algún plan para solucionarlo en la versión 4.0?

@danjjohnson su solución no soluciona el problema cuando el primer elemento es mucho más pequeño que otros

basado en @danjjohnson eso es lo que funcionó para mí

cortar a tajos

encontrar línea

return "" + this.form_field.offsetWidth + "px";

reemplazar con

var calculatedWidth = this.form_field.offsetWidth;
          // Fix for zero width on hidden inputs.
          if (0 == calculatedWidth) {
              var clone = this.form_field_jq.clone();
              clone.css({"left": 10000, "position": "fixed"});
              clone.appendTo('body');
              calculatedWidth = clone.outerWidth();
              clone.remove();
          }
          return "" + calculatedWidth + "px";

$ ('seleccionar'). elegido ({ancho: '100%'}); by @pfiller funcionó para mí en un panel plegable.

Gracias

¿Cómo puedo deshacerme de la clase de búsqueda elegida si no puedo cargar los activos en el directorio de mi proyecto?

Tuve que agregar un tiempo de espera, al cargar selecciones estáticas de una plantilla que aún no se había renderizado. Nada en la jerarquía tenía métricas cuando intentó la inicialización. Envolviéndolo en un tiempo de espera cero, al menos se desplazó la inicialización al final de la cola de eventos.

// Found this in chosen.jquery.js and patched it as follows
AbstractChosen = (function () {
    function AbstractChosen(form_field, options) {
        if (!AbstractChosen.browser_is_supported()) {
            return;
        }

        var self = this;
        window.setTimeout(function () {
            self.form_field = form_field;
            self.options = options != null ? options : {};
            self.is_multiple = self.form_field.multiple;
            self.set_default_text();
            self.set_default_values();
            self.setup();
            self.set_up_html();
            self.register_observers();
        }, 0);
    }

Este error me acaba de picar, solucionó el problema al 100%.

@harvesthq ¿aceptaría una solicitud de extracción para solucionar esto? Aún no estoy seguro de cuál es la mejor solución, pero me complacerá arreglarla y hacer una solicitud de extracción: corazón:

Una solución sólida para esto es usar ng-if en lugar de ng-show. Funciona perfectamente y es sencillo.

He descubierto que ng-if es la opción preferida en muchas situaciones. No solo reparando ng-select roto, sino también para permitir controladores recursivos (usando una combinación de ng-if, ng-controller, ng-init y ng-template).

entonces parece que este problema de 4 años todavía no está resuelto?!?!

+1

+1 mientras tanto ... Estoy usando select2

¿Hay alguna forma de tener una ruleta en el área que se expande cuando se hace clic en la lista de selección elegida? Debe suceder mientras se agregan datos al jquery elegido. Estoy procesando una gran cantidad de registros en jquery elegido y lleva tiempo procesarlos y mostrarlos. ??

Qué error épico de 5 años ... y todavía muerde a la gente (¡ay!).

Google tiene un error similar con su mapa que no se muestra correctamente en un div oculto. sin embargo, ambos problemas tienen soluciones que son fáciles de implementar.

Sí, encontré ese error de Google Maps en algún momento del año pasado IIRC, pero ¿cuántas personas pasaron medio día maldiciendo y probando varias cosas antes de encontrar este informe? Errores como estos en las bibliotecas populares hacen perder horas de tiempo. Multiplicado por la cantidad de personas que aprenden cualquiera de estas bibliotecas cada año, los costos agregados probablemente sean asombrosos ... Si no lo van a solucionar, está bien. Arreglarlo en este punto podría interactuar de manera extraña con una gran cantidad de soluciones implementadas tal vez ... En ese caso, deberían admitir que no lo están arreglando y documentar la solución en algún lugar destacado de la documentación para que la gente no tenga dificultades para hacer (o perder) plazos sobre estas cosas.

Mi solución "general" es similar a otras, y asume que todos los anchos de mis selecciones en el marcado son el 100% de su div principal. Usamos bootstrap, así que este es nuestro caso.

Ejecute este código justo después de inicializar .chosen () al cargar la página.

''
$ (". contenedor-elegido"). each (function (i, elem) {
if ($ (elem) .width () == 0) {
$ (elem) .width ("100%");
}
});
`` ``

Para aquellos de ustedes que tuvieron un problema donde si el elemento estaba inicialmente dentro de un contenedor oculto css, y luego cuando se hizo visible tenía un ancho de 0px, la solución que encontré fue establecer el ancho en js config;

var config = { '.chosen-select' : {}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); }

Luego le di a las entradas seleccionadas la clase css elegida-seleccionar-ancho

<select name="f01" class="chosen-select-width" id="item_select_staff">

Pareció hacer el truco con la v1.6.2 elegida y la versión 3.1.1 de jquery.

Solo dejo la opción de ancho elegida por defecto (automático) y agrego

.chosen-container { min-width:5em; }

al CSS de mi sitio (ajustando el ancho mínimo según sea necesario). Esto hace que nunca se convierta en 0px (o simplemente demasiado pequeño para usar) mientras se ajusta al ancho ideal de la selección cuando sea posible (forzar un ancho del 100% o algo por el estilo no funciona bien cuando tiene elementos seleccionados en línea con otro contenido y esto El método aborda el problema central, además de permitir elementos de selección en línea y aparentemente ofrece la implementación más simple y directa).

¿Cómo es esto todavía roto después de SIETE años?

Mi solución alternativa con bootstrap 3 es agregar el siguiente estilo:

.chosen-container {
    min-width: 90%;
}

Mi solución alternativa con bootstrap 3 es agregar el siguiente estilo:

.chosen-container {
    min-width: 90%;
}

Compre, entonces el menú desplegable todavía no se muestra .... @koenvanderlinden

ya esta documentado
https://harvesthq.github.io/chosen/options.html
Marque la opción width y su descripción

@qbadev Aunque esto hace que el tamaño del elemento no se ajuste al contenido cuando sea necesario, realmente no lo veo como una solución (especialmente cuando el uso de min-width proporciona un mejor resultado que este).

La descripción de la documentación de manera efectiva solo menciona el error (que debería ser posible de resolver) y menciona el uso de eso como una posible solución para el error.

@koenvanderlinden recomienda min-width:90%; por lo que normalmente tiene un ancho del 90% y aumenta al 100% si el contenido de la selección lo requiere. Por otra parte, sigo optando por min-width:5em; (el valor exacto de em que varía según el caso de uso), por lo que nunca es demasiado pequeño, pero aún intenta expandirse para adaptarse al contenido de la selección en lugar del tamaño basado en el padre elemento.

@KZeni No dije que fuera una solución. Solo está documentado. Y es una buena solución. Mi problema principal fue que Chosen tenía casi 0 de ancho después de init. Ahora, después de "arreglar", puedo ver elegido y puedo hacer con él lo que quiera usando clases CSS aplicadas al elemento principal.

Me enfrenté a tales problemas muchas veces antes, que no se pudieron calcular porque el objeto tenía 0 de ancho. No se puede resolver de forma universal, ya que cada aplicación es diferente.
Entonces, cuando la selección de uno está visible en un momento de inicialización, no se necesita ninguna acción, pero si está oculta, usar la opción width es una forma de usarla.

Soporte de ancho personalizado
Usar un ancho personalizado con Chosen es tan fácil como pasar una opción cuando creas Chosen:
$(".chosen-select").chosen({width: "95%"});

https://harvesthq.github.io/chosen/

Encontré este problema después de la actualización de jQuery de la versión 1. * a 3. *.
Resuelto eso:

elegido.jquery.js: 543
AbstractChosen.prototype.container_width = function () {
return this.form_field.offsetWidth + "px";
->
return $(this.form_field).outerWidth() + "px";