fix: report table horizontal scrolling when wide + full page print

schivmeister · schivmeister · commit 68c6b59b6177 · 2025-11-12T15:51:33.000+06:00
Wide tables did not trigger a horizontal scrollbar either on the page or the table, therefore cutting off the table. Add some JavaScript and CSS tricks suggested by CursorAI, namely with scrollX and accompanying CSS to allow the scrollbar on the DataTable, plus a post-init function to update the table columns after any screen resize. Also, add/restore full HTML report print functionality (unsure if this ever worked). Application of meaningfy-ws/diff-query-generator#33. Fixes gh-130, DIF1-27 fix
diff --git a/resources/templates/owl-core-en-only/template_variants/html/templates/layout.html b/resources/templates/owl-core-en-only/template_variants/html/templates/layout.html
@@ -53,16 +53,34 @@
             margin-top: 0.5em;
         }
 
+        /* Enable horizontal scrolling for wide tables */
+        #print-container {
+            overflow-x: auto;
+        }
+
+        .dataTables_wrapper {
+            overflow-x: auto;
+        }
+
+        table.display {
+            width: auto;
+            min-width: 100%;
+        }
+
         @media print {
             #toc {
                 visibility: hidden;
             }
 
-            #print-container {
-                width: 100% !important;
-                position: absolute;
-                left: 0;
-                top: 0;
+            #print-container,
+            .dataTables_wrapper,
+            .dataTables_scrollHead,
+            .dataTables_scrollBody {
+                overflow: visible !important;
+                width: auto !important;
+            }
+            table.display {
+                width: auto !important;
             }
 
             footer {
@@ -115,17 +133,32 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
 
 <script type="text/javascript">
     $(document).ready(function () {
+        const tables = [];
+
+        $("table.display").each(function () {
+            const columns = $(this).find("th").map(function () {
+                return { orderable: true };
+            }).get();
+
+            const instance = $(this).DataTable({
+                dom: 'B<"clear">lfrtip',
+                buttons: ['print'],
+                lengthMenu: [[5, 15, 30, -1], [5, 15, 30, "All"]],
+                scrollX: true,
+                autoWidth: false,
+                columns: columns
+            });
 
-        $("table.display").DataTable({
-            dom: 'B<"clear">lfrtip',
-            buttons: [
-                'print'
-            ],
-            "lengthMenu": [[5, 15, 30, -1], [5, 15, 30, "All"]],
-            responsive: {
-                details: true
-            }
+            tables.push(instance);
         });
+
+        // Fix column alignment on window resize
+        if (tables.length) {
+            $(window).on('resize', function () {
+                tables.forEach(dt => dt.columns.adjust());
+            });
+        }
+
         $("h2").each(function () {
             if (!$(this).next().is("section") && !$(this).next().is("h3") && !$(this).next().hasClass("dataTables_wrapper")) {
                 $(this).remove();
@@ -147,23 +180,29 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
             $("#print-container").append("<p><strong>Datasets are identical and no difference was found</strong></p>")
         }
 
-        $(function () {
-            $("#toc").tocify({
-                selectors: "h1,h2",
-                theme: "jqueryui",
-                hashGenerator: "pretty",
-                ignoreSelector: "#skip-toc",
-                highlightOnScroll: "true",
-                highlightDefault: "true"
-            });
+        $("#toc").tocify({
+            selectors: "h1,h2",
+            theme: "jqueryui",
+            hashGenerator: "pretty",
+            ignoreSelector: "#skip-toc",
+            highlightOnScroll: "true",
+            highlightDefault: "true"
         });
 
-        $(function () {
-            $("#printButton").click(function () {
-                $("table.display").DataTable().page.len(-1).draw()
-                window.print()
-            })
-        })
+        $("#printButton").click(function () {
+            // First, expand all tables to show all rows
+            tables.forEach(dt => dt.page.len(-1).draw());
+
+            // Force a reflow so print styles can apply
+            // Then recalculate column widths for print layout
+            setTimeout(function() {
+                tables.forEach(dt => dt.columns.adjust());
+                // Small delay to ensure adjustments complete before print dialog
+                setTimeout(function() {
+                    window.print();
+                }, 50);
+            }, 100);
+        });
 
 
     });
diff --git a/resources/templates/shacl-core-en-only/template_variants/html/templates/layout.html b/resources/templates/shacl-core-en-only/template_variants/html/templates/layout.html
@@ -53,16 +53,34 @@
             margin-top: 0.5em;
         }
 
+        /* Enable horizontal scrolling for wide tables */
+        #print-container {
+            overflow-x: auto;
+        }
+
+        .dataTables_wrapper {
+            overflow-x: auto;
+        }
+
+        table.display {
+            width: auto;
+            min-width: 100%;
+        }
+
         @media print {
             #toc {
                 visibility: hidden;
             }
 
-            #print-container {
-                width: 100% !important;
-                position: absolute;
-                left: 0;
-                top: 0;
+            #print-container,
+            .dataTables_wrapper,
+            .dataTables_scrollHead,
+            .dataTables_scrollBody {
+                overflow: visible !important;
+                width: auto !important;
+            }
+            table.display {
+                width: auto !important;
             }
 
             footer {
@@ -115,17 +133,32 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
 
 <script type="text/javascript">
     $(document).ready(function () {
+        const tables = [];
+
+        $("table.display").each(function () {
+            const columns = $(this).find("th").map(function () {
+                return { orderable: true };
+            }).get();
+
+            const instance = $(this).DataTable({
+                dom: 'B<"clear">lfrtip',
+                buttons: ['print'],
+                lengthMenu: [[5, 15, 30, -1], [5, 15, 30, "All"]],
+                scrollX: true,
+                autoWidth: false,
+                columns: columns
+            });
 
-        $("table.display").DataTable({
-            dom: 'B<"clear">lfrtip',
-            buttons: [
-                'print'
-            ],
-            "lengthMenu": [[5, 15, 30, -1], [5, 15, 30, "All"]],
-            responsive: {
-                details: true
-            }
+            tables.push(instance);
         });
+
+        // Fix column alignment on window resize
+        if (tables.length) {
+            $(window).on('resize', function () {
+                tables.forEach(dt => dt.columns.adjust());
+            });
+        }
+
         $("h2").each(function () {
             if (!$(this).next().is("section") && !$(this).next().is("h3") && !$(this).next().hasClass("dataTables_wrapper")) {
                 $(this).remove();
@@ -147,23 +180,29 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
             $("#print-container").append("<p><strong>Datasets are identical and no difference was found</strong></p>")
         }
 
-        $(function () {
-            $("#toc").tocify({
-                selectors: "h1,h2",
-                theme: "jqueryui",
-                hashGenerator: "pretty",
-                ignoreSelector: "#skip-toc",
-                highlightOnScroll: "true",
-                highlightDefault: "true"
-            });
+        $("#toc").tocify({
+            selectors: "h1,h2",
+            theme: "jqueryui",
+            hashGenerator: "pretty",
+            ignoreSelector: "#skip-toc",
+            highlightOnScroll: "true",
+            highlightDefault: "true"
         });
 
-        $(function () {
-            $("#printButton").click(function () {
-                $("table.display").DataTable().page.len(-1).draw()
-                window.print()
-            })
-        })
+        $("#printButton").click(function () {
+            // First, expand all tables to show all rows
+            tables.forEach(dt => dt.page.len(-1).draw());
+
+            // Force a reflow so print styles can apply
+            // Then recalculate column widths for print layout
+            setTimeout(function() {
+                tables.forEach(dt => dt.columns.adjust());
+                // Small delay to ensure adjustments complete before print dialog
+                setTimeout(function() {
+                    window.print();
+                }, 50);
+            }, 100);
+        });
 
 
     });
diff --git a/resources/templates/skos-core-en-only/template_variants/html/templates/layout.html b/resources/templates/skos-core-en-only/template_variants/html/templates/layout.html
@@ -53,16 +53,34 @@
             margin-top: 0.5em;
         }
 
+        /* Enable horizontal scrolling for wide tables */
+        #print-container {
+            overflow-x: auto;
+        }
+
+        .dataTables_wrapper {
+            overflow-x: auto;
+        }
+
+        table.display {
+            width: auto;
+            min-width: 100%;
+        }
+
         @media print {
             #toc {
                 visibility: hidden;
             }
 
-            #print-container {
-                width: 100% !important;
-                position: absolute;
-                left: 0;
-                top: 0;
+            #print-container,
+            .dataTables_wrapper,
+            .dataTables_scrollHead,
+            .dataTables_scrollBody {
+                overflow: visible !important;
+                width: auto !important;
+            }
+            table.display {
+                width: auto !important;
             }
 
             footer {
@@ -115,17 +133,32 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
 
 <script type="text/javascript">
     $(document).ready(function () {
+        const tables = [];
+
+        $("table.display").each(function () {
+            const columns = $(this).find("th").map(function () {
+                return { orderable: true };
+            }).get();
+
+            const instance = $(this).DataTable({
+                dom: 'B<"clear">lfrtip',
+                buttons: ['print'],
+                lengthMenu: [[5, 15, 30, -1], [5, 15, 30, "All"]],
+                scrollX: true,
+                autoWidth: false,
+                columns: columns
+            });
 
-        $("table.display").DataTable({
-            dom: 'B<"clear">lfrtip',
-            buttons: [
-                'print'
-            ],
-            "lengthMenu": [[5, 15, 30, -1], [5, 15, 30, "All"]],
-            responsive: {
-                details: true
-            }
+            tables.push(instance);
         });
+
+        // Fix column alignment on window resize
+        if (tables.length) {
+            $(window).on('resize', function () {
+                tables.forEach(dt => dt.columns.adjust());
+            });
+        }
+
         $("h2").each(function () {
             if (!$(this).next().is("section") && !$(this).next().is("h3") && !$(this).next().hasClass("dataTables_wrapper")) {
                 $(this).remove();
@@ -147,23 +180,29 @@ <h1 class="ui header center aligned reportTitle" id="skip-toc">{{ conf.title }}<
             $("#print-container").append("<p><strong>Datasets are identical and no difference was found</strong></p>")
         }
 
-        $(function () {
-            $("#toc").tocify({
-                selectors: "h1,h2",
-                theme: "jqueryui",
-                hashGenerator: "pretty",
-                ignoreSelector: "#skip-toc",
-                highlightOnScroll: "true",
-                highlightDefault: "true"
-            });
+        $("#toc").tocify({
+            selectors: "h1,h2",
+            theme: "jqueryui",
+            hashGenerator: "pretty",
+            ignoreSelector: "#skip-toc",
+            highlightOnScroll: "true",
+            highlightDefault: "true"
         });
 
-        $(function () {
-            $("#printButton").click(function () {
-                $("table.display").DataTable().page.len(-1).draw()
-                window.print()
-            })
-        })
+        $("#printButton").click(function () {
+            // First, expand all tables to show all rows
+            tables.forEach(dt => dt.page.len(-1).draw());
+
+            // Force a reflow so print styles can apply
+            // Then recalculate column widths for print layout
+            setTimeout(function() {
+                tables.forEach(dt => dt.columns.adjust());
+                // Small delay to ensure adjustments complete before print dialog
+                setTimeout(function() {
+                    window.print();
+                }, 50);
+            }, 100);
+        });
 
 
     });
