From 66be442eb6d9d1f01449a20c5fe406eca3a9ba5c Mon Sep 17 00:00:00 2001
From: solocla <info@claudiosironi.com>
Date: Fri, 17 Apr 2026 15:00:17 +0200
Subject: [PATCH] scrollbar import page

---
 public/userarea/import_xls2.php | 67 +++++++++++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 3 deletions(-)

diff --git a/public/userarea/import_xls2.php b/public/userarea/import_xls2.php
index 8fc4ce0..ad7fe20 100644
--- a/public/userarea/import_xls2.php
+++ b/public/userarea/import_xls2.php
@@ -40,6 +40,22 @@ error_log("Loaded template: " . print_r($template, true));
     <?php include('cssinclude.php'); ?>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
+        .top-scrollbar {
+            overflow-x: auto;
+            overflow-y: hidden;
+            width: 100%;
+            height: 18px;
+            margin-bottom: 8px;
+            border: 1px solid #dee2e6;
+            border-radius: 0.25rem;
+            background: #f8f9fa;
+            display: none;
+        }
+
+        .top-scrollbar-inner {
+            height: 1px;
+        }
+
         .table-container {
             overflow-x: auto;
             max-width: 100%;
@@ -324,8 +340,12 @@ error_log("Loaded template: " . print_r($template, true));
         <button type="submit" class="btn btn-primary" id="proceedButtonTop" disabled>Prosegui</button>
     </div>
 
-    <div class="table-container">
-        <table class="table table-striped table-bordered">
+<div class="top-scrollbar" id="topTableScrollbar">
+    <div class="top-scrollbar-inner" id="topTableScrollbarInner"></div>
+</div>
+
+<div class="table-container" id="mainTableContainer">
+    <table class="table table-striped table-bordered" id="importPreviewTable">
             <thead>
                 <tr>
                     <th><input type="checkbox" id="selectAll"> Seleziona</th>
@@ -363,6 +383,47 @@ error_log("Loaded template: " . print_r($template, true));
 `;
                 tableContainer.innerHTML = html;
 
+                const topTableScrollbar = document.getElementById('topTableScrollbar');
+                const topTableScrollbarInner = document.getElementById('topTableScrollbarInner');
+                const mainTableContainer = document.getElementById('mainTableContainer');
+                const importPreviewTable = document.getElementById('importPreviewTable');
+
+                function updateTopTableScrollbar() {
+                    if (!topTableScrollbar || !topTableScrollbarInner || !mainTableContainer || !importPreviewTable) return;
+
+                    topTableScrollbarInner.style.width = importPreviewTable.scrollWidth + 'px';
+
+                    if (mainTableContainer.scrollWidth > mainTableContainer.clientWidth) {
+                        topTableScrollbar.style.display = 'block';
+                    } else {
+                        topTableScrollbar.style.display = 'none';
+                    }
+                }
+
+                let syncingTop = false;
+                let syncingBottom = false;
+
+                if (topTableScrollbar && mainTableContainer) {
+                    topTableScrollbar.addEventListener('scroll', function() {
+                        if (syncingBottom) return;
+                        syncingTop = true;
+                        mainTableContainer.scrollLeft = topTableScrollbar.scrollLeft;
+                        syncingTop = false;
+                    });
+
+                    mainTableContainer.addEventListener('scroll', function() {
+                        if (syncingTop) return;
+                        syncingBottom = true;
+                        topTableScrollbar.scrollLeft = mainTableContainer.scrollLeft;
+                        syncingBottom = false;
+                    });
+                }
+
+                updateTopTableScrollbar();
+                setTimeout(updateTopTableScrollbar, 100);
+                setTimeout(updateTopTableScrollbar, 300);
+                window.addEventListener('resize', updateTopTableScrollbar);
+
                 const proceedButtonTop = document.getElementById('proceedButtonTop');
                 const proceedButtonBottom = document.getElementById('proceedButtonBottom');
                 const selectAllCheckbox = document.getElementById('selectAll');
@@ -493,4 +554,4 @@ error_log("Loaded template: " . print_r($template, true));
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file