Chosen: Elegido sin estilo correctamente en un diálogo de bootstrap 3.x.

Creado en 31 may. 2017 · 6Comentarios · Fuente: harvesthq/chosen

Resuma su problema aquí.
Elegido sin estilo correctamente en un diálogo de bootstrap 3.x.

pasos para reproducir

cargar el CSS de Bootstrap
cargar cargar un diálogo.
abre el dialogo

Además, enlace a una demostración en funcionamiento que muestre el problema para que podamos intentar reproducirlo. Puede utilizar esta plantilla como base. Alternativamente, confirme que la página de demostración Elegida muestra el problema.

Comportamiento esperado

para mostrar el menú desplegable con un estilo agradable y con capacidad de búsqueda

Comportamiento real

aquí tienes

Medio ambiente

Versión elegida :
elegido_v1.6.2 /
jQuery o versión de prototipo :
/jquery/1.11.2/jquery.min.js '
Navegador y versión :
Mozilla / 5.0 (Windows NT 10.0; WOW64; rv: 53.0) Gecko / 20100101 Firefox / 53.0
SO y versión :
ventanas 10

Información adicional

n / A

Fuente

lordspace

Comentario más útil

Ok, solo para agregar una actualización sobre esto.
Cuando paso el ancho en el método de inicialización, todo funciona sin el truco anterior.

$("select").chosen({
                search_contains : true, // kwd can be anywhere
                max_selected_options: 1,
                max_shown_results : 5, // show only 5 suggestions at a time
                width: "95%",
                no_results_text: "Oops, nothing found!"
            } );

lordspace en 17 jun. 2017

👍3 ❤1

Todos 6 comentarios

La 1.6.2 elegida no es la última versión, ¿todavía tiene su problema con la última versión lanzada ?

tjschuck en 31 may. 2017

Me aseguraré de tenerlo y te lo haré saber.

lordspace en 3 jun. 2017

Sí, el problema persiste incluso en la última versión 1.7.

Revisé algunos temas de stackoverflow y se me ocurrió esta solución.

$('.modal').filter('[class*=_dialog]').on('show.bs.modal', function () {
                // This makes the dialog expand when shown in a bootstrap dlg
                $(this).find('.chosen-container').css({width: "100%"});
            });

La aplicación es personalizada y para un cliente y no puede proporcionar un enlace a ella.

lordspace en 5 jun. 2017

Ok, solo para agregar una actualización sobre esto.
Cuando paso el ancho en el método de inicialización, todo funciona sin el truco anterior.

$("select").chosen({
                search_contains : true, // kwd can be anywhere
                max_selected_options: 1,
                max_shown_results : 5, // show only 5 suggestions at a time
                width: "95%",
                no_results_text: "Oops, nothing found!"
            } );

lordspace en 17 jun. 2017

👍3 ❤1

Gracias por el truco @lordspace. Me tomó bastante tiempo encontrar tu solución.

No estoy seguro de por qué se cerró este problema en el repositorio "bootstrap-selected" (https://github.com/alxlit/bootstrap-chosen/issues/54).

pihug12 en 21 ago. 2017

No hay problema. Tal vez lo cerré asumiendo que no es un error si se puede solucionar a través de las opciones, pero cuando lo pienso ahora debería funcionar de inmediato.

lordspace en 21 ago. 2017

¿Fue útil esta página

0 / 5 - 0 calificaciones