jquery - elegido con bootstrap 3 no funciona correctamente

tooltip bootstrap

Question

Tengo este código que activa un modo de arranque y carga su contenido a través de $.load() . La página que estoy cargando tiene un elemento de selección al que estoy llamando elegido. Aquí está el código:

$(''.someClick'').click(function(e){
   e.preventDefault();
   x.modal(''show'');
   x.find(''.modal-body'').load(''path/page.html'',
function(response, status, xhr){

       if(status =="success")
        $("select[name=elementName]").chosen();

    });
});

Los resultados que estoy obteniendo son como la siguiente imagen:

y este es mi contenido HTML:

 <select name="elementName" data-placeholder="Please work.." class="chosen-select">
        <option value="test">Hi</option>
        <option value="test2">bye</option>
 </select>

Answer 1

Agregar ancho a la clase elegida resolverá este problema.

$(''.someClick'').click(function(e){
   e.preventDefault();
   x.modal(''show'');
   x.on(''shown.bs.modal'', function(){
       x.find(''.modal-body'').load(''path/page.html'', function(response, status, xhr){
           if(status == "success"){
               $("select[name=elementName]").chosen({ width:''100%'' }); /* add width here !!! */
           }
       });
   });
});

Answer 2

Como se describe en Permitir que se use Chern en el modo Bootstrap , el problema está dentro del archivo chosen.jquery.js . chosen.jquery.js . Lo encontré en la línea 435 y acabo de agregar el siguiente código dentro de la instrucción else . Compruébalo, funcionó para mí.

// Fixing problem when the select is not displayed.
   if ( this.form_field.offsetWidth == 0 ) {
      return "" + $(this.form_field).width() + "px";
    }

Answer 3

Hoy tuve el mismo problema pero necesitaba una solución rápida ... pero disparé una captura de pantalla de mi problema:

Este es mi problema

así que hice esto:

1) El problema es el "ancho", por lo que vi en la consola esto

Eche un vistazo en la consola, sobre el "seleccionar"

2) Hice una solución rápida agregando un nuevo "ancho". Como puede ver en la imagen anterior, hay una clase ''class = "tipo-contenedor-elegido-contenedor-elegido-solo'', así que tomé la clase" recipiente-elegido "para agregar el nuevo" ancho "cuando llamo a mi" Modal ". Aquí mi código:

solo agrega una linea

Así que, básicamente, he añadido este código:

$(''.chosen-container'').css({ ''width'':''350px'' });

A la función que llama el modal. Siéntase libre de copiar y pegar esto en su función :) Tal vez no sea una solución perfecta pero funciona para mí y quizás también para usted.

Lo siento por mi inglés, pero estoy aprendiendo. Yo hablo español mejor que ingles Saludos

PD: Ahí está mi resultado.

Answer 4

Intente esto, indagué en la selección y descubrí que solo necesito pasar opciones con propiedades de "ancho" como en este, o cualquier otro valor de ancho:

$("select").chosen({width: "inherit"}) 

Answer 5

La siguiente solución funcionó para mí (de http://codepen.io/m-e-conroy/pen/ALsdF ):

Redefinir la clase "modal":

.modal { 
    display: block;
}

Answer 6

La aplicación de Elegido después de que se muestra el modal debería resolver su problema:

$(''#myModal'').on(''shown.bs.modal'', function () {
  $(''.chosen-select'', this).chosen();
});

O cuando ya se aplicó Elegido, destruye y vuelve a aplicar:

$(''#myModal'').on(''shown.bs.modal'', function () {
  $(''.chosen-select'', this).chosen(''destroy'').chosen();
});

Fiddle aquí: http://jsfiddle.net/koenpunt/W6dZV/

Así que en tu caso probablemente sería algo como:

$(''.someClick'').click(function(e){
   e.preventDefault();
   x.modal(''show'');
   x.on(''shown.bs.modal'', function(){
       x.find(''.modal-body'').load(''path/page.html'', function(response, status, xhr){
           if(status == "success"){
               $("select[name=elementName]").chosen();
           }
       });
   });
});

EDITAR

Para complementar Chosen puedes usar el tema Chosen Bootstrap