0
908
VistasDataTables: cuando la barra de desplazamiento de tbody está oculta, la columna fija se desordena
Tengo una tabla que incluye:
- la primera columna es fija
- pie
- barra de desplazamiento horizontal de tfoot
- tener la barra de desplazamiento horizontal oculta de tbody.
Violín: https://jsfiddle.net/jbeteta/6sxh3gbk/12/
$(function() { $('#example').DataTable({ "fnInitComplete": function () { // Disable scrolling in Head $('.dataTables_scrollHead').css({ 'overflow-y': 'hidden !important' }); // Disable TBODY scroll bars $('.dataTables_scrollBody').css({ 'overflow-y': 'scroll', 'overflow-x': 'hidden', 'border': 'none' }); // Enable TFOOT scoll bars $('.dataTables_scrollFoot').css('overflow', 'auto'); // Sync TFOOT scrolling with TBODY $('.dataTables_scrollFoot').on('scroll', function () { $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft()); }); }, scrollX: true, paging: true, fixedColumns: { leftColumns: 1 } }); }); En ese escenario, cuando se desplaza hacia el lado derecho, verá que la celda de la última fila de la columna fija (color de fondo: rojo) se desordena, porque la barra de desplazamiento horizontal <tbody> está oculta.
Mi pregunta: ¿Hay alguna forma de corregir esto?
Por cierto: tuve que ocultar la barra de desplazamiento horizontal <tbody> porque no se sincroniza con la barra de desplazamiento <tfoot> .
Muchas gracias
EDITAR: En Chrome es lo mismo:
2 Respuestas
Responde la pregunta0
Aquí hay una solución parcial . Toda la configuración es una gran combinación de diferentes tablas y divs. Por alguna razón, las barras de desplazamiento ocultas todavía están en "efecto" para varios de los divs, es decir, aún ocupan espacio y reaccionan cuando se desplazan otros elementos. Tal vez realmente, un intento muy cuidadoso y el error CSS-ing en cada elemento / contenedor podría resolver el problema general, pero para mí parece el comportamiento esperado del navegador, simplemente "tal como es". Pero en los navegadores webkit puedes hacer esto:
div:not(.dataTables_scrollFoot)::-webkit-scrollbar { display: none; }https://jsfiddle.net/6sxh3gbk/19/
Esto deshabilitará efectivamente todas las desagradables barras de desplazamiento ocultas (pero no realmente ocultas) en los elementos <div> inyectados, pero las conservará en el elemento de pie de página con el que queremos desplazarnos.
Pero esto solo se aplica a los navegadores webkit : Chrome, Chrome, Safari, Opera y Android.
Gecko (mozilla) una vez tuvo una función similar -moz-scrollbars-none pero quedó obsoleta y se dejó de lado. AFAIK hay un clamor permanente por traerlo de vuelta.
Este también es el caso de Edge, el tema aún se está planteando . Para Edge hay una esperanza real, ya que MS ha declarado muchas veces que EdgeHTML está destinado a ser totalmente compatible con el motor de diseño WebKit.
Entonces, una solución parcial, que cubre quizás el 85%, incluidos todos los dispositivos.
0
Por favor, compruebe..
- la primera columna es fija
- pie
- barra de desplazamiento horizontal de tfoot
- tener la barra de desplazamiento horizontal oculta de tbody.
Este problema ha sido resuelto. Su respuesta se da a continuación enlace ..
$(function() { $('#example').DataTable({ scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, fixedColumns: { leftColumns: 1 } }); });