bootstrap - chosen jquery

El complemento elegido de jQuery en las listas desplegables parece extraño.

Question

Estoy usando el plugin jQuery elegido y creo que he hecho todo correctamente, sin embargo mi ancho de lista desplegable asp.net es tan pequeño que no veo los resultados.

Primero agregué una referencia a las bibliotecas:

<script type="text/javascript" src="Chosen/chosen.jquery.js"></script>

Incluí el CSS:

<link rel="stylesheet" href="Chosen/chosen.css" />

Luego apliqué la clase a mi menú desplegable:

  <asp:DropDownList class="chosen-select" ID="ddlEmps" runat="server" AutoPostBack="True" 
                            ToolTip="Select the employee." 
                            onselectedindexchanged="ddlEmps_SelectedIndexChanged" >

Finalmente en el documento listo I. .chosen() :

 $(document).ready(function() {
            $(".chosen-select").chosen();
        });

Aquí está el marcado html en el navegador:

El marcado es básicamente:

<select name="ddlEmps" onchange="javascript:setTimeout(''__doPostBack(/'ddlEmps/',/'/')'', 0)" id="ddlEmps" title="Select the employee." class="chosen-select" style="display: none;">
    <option value="2661">Jon</option>
    <option value="2987">Joe</option>
    <option value="3036">Steve</option>
    <option selected="selected" value="68">Mark</option>
</select>

Esto es lo que parece visualmente:

Creo que se está aplicando correctamente, ya que el css está allí, no hay problemas con el navegador en la consola (chrome / ff / ie). Incluso puedo comenzar a escribir cosas y los resultados se hacen más pequeños, simplemente no puedo ver los resultados.

Actualizar

Lo único que sí noté es que si tengo una DropDownList no tengo una clase chosen-select en ella (básicamente una lista desplegable simple de asp.net) y no aplique la opción elegida en el documento listo o en la ventana cargada ... si Acabo de aplicar .chosen() a él durante la consola, aparece correctamente, por ejemplo, aquí hay una lista desplegable simple sin aplicar. .chosen :

Entonces parece correcto ... si ahora voy a la sección de la consola (google chrome) y simplemente lo hago:

$("#ddlEREmployees").chosen();

Eso es solo directamente en la consola que escribo que en ese momento funciona como se muestra:

Pero, por supuesto, todavía tengo que hacer que esto funcione sin tener que ir a la consola y hacer esto ...

Actualización 2

Miré el html renderizado y está produciendo un ancho: 0px, pero no estoy seguro de dónde proviene:

<div class="chosen-container chosen-container-single" style="width: 0px;" title="Select the employee." id="ddlEtimeEmps_chosen"><a class="chosen-single" tabindex="-1"><span>Jon</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div>

Observe la sección

style="width: 0px;"

Cuando reviso google chrome no hace referencia a un archivo .css ... solo dice:

Estilos y debajo de eso veo:

element.style {
 width: 0px;
}

¿De dónde podría venir esto? ¿Y cómo puedo eliminarlo?

Answer 1

Si la ID de campo elegida dentro de una ventana emergente, pruebe este CSS. Esto funcionó para mí.

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

Answer 2

Prueba usando

$(".chosen-select").chosen({width: 10em;});

Puede ser un problema de css. Try depuración de los estilos CSS aplicados en el div choden final.

Answer 3

Tuve el problema de 0 ancho cuando estaba usando el ''elegido-seleccionar'' dentro de una pestaña. Tuve que agregar este código al cambiar a esa pestaña.

$(window).load(function(){
    $(".chosen-select").chosen();
});

Answer 4

Tuve que jugar con el jquery y eliminar el estilo ...

$(".chosen-select").chosen(); $(''.chosen-container'').css(''width'', '''');

Esto eliminó el estilo CSS que describí en mi pregunta inicial.

Answer 5

¿Su control elegido inicialmente está oculto (ejemplo dentro de un contenedor emergente)?

Si es así, intente usar:

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

o alguna corrección de css relacionada sugerida en los siguientes enlaces; por el momento no se lanza ninguna solución final.

Problemas de Github: https://github.com/harvesthq/chosen/issues/92 y https://github.com/harvesthq/chosen/issues/795

Answer 6

Pensé que tal vez alguien más podría encontrar esto útil, ya que usamos Elegido en nuestra aplicación de formularios web.

1. Debe establecer el ancho cuando crea una instancia de Elegido en su menú desplegable / listbox, si el menú desplegable / listbox no está visible cuando se carga la página. Por ejemplo, tenemos cuadros de diálogo emergentes que no se muestran en la carga de la página. Se muestran cuando el usuario hace clic en un botón / icono.

2. Usamos EndRequestHandlers en nuestro js para manejar las devoluciones de datos. A veces tenemos que establecer el ancho e instanciar Elegido de nuevo. Aquí hay un ejemplo:

$ (function () {Sys.WebForms.PageRequestManager.getInstance (). add_endRequest (EndRequestHandler); Sys.WebForms.PageRequestManager.getInstance (). add_beginRequest (BeginRequestHandler);

function BeginRequestHandler(sender, args) {

}

function EndRequestHandler(sender, args) {
    if (args.get_error() == undefined) {
        var postBack = sender._postBackSettings;
        var postBackClass = postBack.sourceElement.className;

        if (postBack == null || postBack.sourceElement == null || postBackClass == null || postBackClass == "") {
        }
    }

    $(''#filter-container select'').chosen({ width: "100px", disable_search_threshold: 10, no_results_text: "Item Not Found" });

}

});

3. Elegido no es lo suficientemente robusto como para saber que ya se está aplicando desde otra llamada en otro lugar. Por lo tanto, tenga en cuenta los selectores que elija para aplicar el complemento Chosen. Es mejor ser más específico.

Answer 7

Otra opción que encontré.

AbstractChosen.prototype.container_width = function () {
      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;
      };
      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";
      }
};