Abrir bootstrap select en el problema de la tabla de bootstrap

El problema

Estoy usando el complemento bootstrap-table y el complemento bootstrap-select , que funcionan muy bien.
Pero tengo un problema cuando uso el bootstrap-select dentro de un bootstrap-table. Si se abre el cuadro de selección de la última fila, el tamaño de la tabla cambia en lugar de que el cuadro de selección pase “sobre” el área de la tabla creando un área de desplazamiento que no me gusta.

Como en la imagen de abajo: introduzca la descripción de la imagen aquí

He intentado “arreglar” este efecto utilizando el código de javascript que se muestra a continuación, pero sin éxito. El código se ejecuta pero el problema sigue ahí. No veo qué css es responsable de este comportamiento y cualquier ayuda es muy apreciada.

$('.table-responsive').on('show.bs.select', function () { console.log("triggered show bs select"); $('.table-responsive').css( "overflow", "hidden" ); }); $('.table-responsive').on('hide.bs.select', function () { console.log("triggered hide bs select"); $('.table-responsive').css( "overflow", "auto" ); }) 

Ejemplo

El comportamiento se puede ver en:
Jsfiddle: http://jsfiddle.net/e3nk137y/8612/


Editar

Lo tengo funcionando ahora pero solo con la aplicación de padding-bottom en la tabla y usando el siguiente código js:

 $('.table-responsive').on('show.bs.select', function () { $('.table-responsive').css( "overflow", "inherit" ); $('.bootstrap-table').css( "overflow", "inherit" ); $('.fixed-table-body').css( "overflow", "inherit" ); }); 

Dejo la pregunta abierta por ahora, ya que esta no es una solución “buena” en mi opinión, especialmente el relleno adicional que se necesita para “ocultar” nuevamente el cuadro de selección.

Puedes añadir el container: 'body' opciones container: 'body' . Esto colocará el menú desplegable fuera de la tabla y evitará el problema. Si hay un problema con el body , solo use cualquier elemento que contenga la tabla, que sea lo suficientemente grande como para contener el menú desplegable.

Jsfiddle

La clase .fixed-table-body parece estar causando esto. Eliminando overflow-x: auto; y overflow-x: auto; Soluciona tu problema.

La clase .table-responsive parece estar causando esto. Eliminando overflow-x: auto; Soluciona tu problema. Puedes encontrar el estilo en bootstrap.css

    Intereting Posts