Chosen: Arreglo para problema de ancho cero

Duplicado del # 92.

Tuve que hacer este cambio en la solución:
if (/px/.test(this.form_field_jq.css("width "))) {
this.f_width = this.form_field_jq.css ("ancho"). replace ("px", "");
} demás {
this.f_width = this.form_field_jq.css ("ancho");
}
ya que this.form_field_jq.css ("ancho"); estaba devolviendo el ancho con px al final

Tengo una solución y esto funciona bien en mi proyecto:

this.f_width = this.form_field_jq.outerWidth (); // agregue el código debajo de esta línea en selected.jqeury.js

  if (this.f_width==0){ 
      var cloneObj= this.form_field_jq.clone();
      cloneObj.removeAttr('id');
      $(document.body).append(cloneObj);
      var w = cloneObj.width();
      cloneObj.remove();
      this.f_width=w;
  }

Espero que esto ayude a alguien, ya que funciona bien en mi proyecto.

Acabo de agregar la siguiente regla CSS:

.chosen-container
{
    width: 100% !important;
}

¡Gracias fabioduque! ¡Configurar css para el contenedor elegido resolvió mi problema!

Realmente no es necesario establecer el ancho en CSS. Puede hacerlo bien al inicializar Chosen.

$(".chosen-select").chosen({ width: '100%' }); // any acceptable CSS width will work

En realidad, creé un KO bindingHandler para generar mis elementos elegidos, y no todos tienen un ancho del 100%, por lo que CSS es el camino a seguir para mí. Aunque pude establecer el ancho como una opción en mi bindingHandler.

Gracias @fabioduque ¡También me funcionó!

@pfiller , ¡gracias! eso resolvió mi problema.

¿Por qué sucede esto a veces? :(

Usé el enfoque CSS, porque no quería buscar en todos los lugares que usé elegidos (y otros desarrolladores podrían tener el mismo problema al crear nuevas vistas). Entonces, el CSS soluciona el problema a nivel mundial. Gracias @fabioduque

Me estaba encontrando con este problema con la lógica condicional en uno de mis complementos de WordPress ... específicamente con el ancho establecido en 0px ... incluso después de init (que pongo en cola los campos elegidos con chosen:ready así que si ya es init y oculto el div principal) ... pero de todos modos, esto es lo que usé para solucionar esto cuando mi código jQuery se ejecuta para mostrar el elemento DIV principal antes de ejecutar chosen:updated

// This is the original select field
$field = $( '#' + field );

// This is the select field wrapper that I hide (just shown for reference)
$( '.fieldset-' + field ).show();

// Chosen container ID will be original select element ID + _chosen
var $chosen_container = $( '#' + field + '_chosen' );
if( $chosen_container && $chosen_container.width() === 0 ){
    $chosen_container.css( 'width', '100%' );
}

$field.trigger( 'chosen:updated' );

Si alguien más todavía tiene este problema, verifique cuándo está llamando a $ (". Selected-select"). Selected (). Tenía una lista de llamadas a funciones de JavaScript en la carga de la página, cuando moví la llamada .chosen () a la parte superior de la lista, aplicó el ancho correctamente, no más ancho cero. Las funciones que moví arriba estaban recuperando algunos datos y haciendo muchas operaciones dom.

¿Por qué tengo 2 íconos de búsqueda, probé las dos soluciones anteriores?