fixed table and search

2026-01-21 12:10:05 +01:00
parent e876cb9775
commit 49435b8e44
429 changed files with 456 additions and 1 deletions
@@ -85,7 +85,61 @@
            transition: 0.2s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
+
+        /* === DataTables search: make it stand out === */
+        .dataTables_wrapper .dataTables_filter {
+            position: relative;
+            margin-bottom: 12px;
+        }
+
+        .dataTables_wrapper .dataTables_filter label {
+            font-weight: 700;
+            color: #1f2d3d;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            justify-content: flex-end;
+            /* search allineato a destra */
+        }
+
+        /* input vero e proprio */
+        .dataTables_wrapper .dataTables_filter input {
+            width: 340px !important;
+            /* più grande */
+            max-width: 100%;
+            padding: 10px 14px !important;
+            border-radius: 12px !important;
+            border: 2px solid #198754 !important;
+            /* verde evidenza */
+            background: #fff !important;
+            box-shadow: 0 6px 18px rgba(25, 135, 84, 0.18);
+            outline: none !important;
+            transition: all .15s ease;
+        }
+
+        /* focus ancora più evidente */
+        .dataTables_wrapper .dataTables_filter input:focus {
+            border-color: #146c43 !important;
+            box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25), 0 10px 22px rgba(25, 135, 84, 0.22) !important;
+        }
+
+        .dataTables_wrapper .dataTables_filter::after {
+            content: "🔎";
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            pointer-events: none;
+            opacity: 0.7;
+            font-size: 16px;
+        }
+
+        /* spazio a destra per non “toccare” l’icona */
+        .dataTables_wrapper .dataTables_filter input {
+            padding-right: 42px !important;
+        }
    </style>
+
 </head>

 <body>
@@ -279,6 +333,17 @@
                }
            });

+            // Rendiamo più chiaro il filtro
+            $('#tabellaMatrici_filter label').contents().filter(function() {
+                return this.nodeType === 3; // text node
+            }).first().replaceWith('Cerca: ');
+
+            // Placeholder nell'input
+            $('#tabellaMatrici_filter input')
+                .attr('placeholder', 'Nome matrice, cliente…')
+                .addClass('form-control'); // opzionale: look Bootstrap coerente
+
+
            // === EDIT MATRICE ===
            $(document).on("click", ".edit", function() {
                $("#idMatriceEdit").val($(this).data("id"));