From 4f27bea02f135554ae4ecb61dd3387941d7908a7 Mon Sep 17 00:00:00 2001 From: David Cook Date: Tue, 9 Jan 2024 13:25:43 +1100 Subject: [PATCH] Make table header sticky But it overlaps the .form-actions. how to make them sticky together.. todo: register the z-index in variables.scss --- app/webpacker/css/admin/products_v3.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 9114a43fba..cc633277ab 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -49,9 +49,15 @@ border-collapse: separate; // This is needed for the outer padding. Also should be helpful to give more flexibility of borders between rows. // Additional horizontal padding to align with input contents - thead th.with-input { - padding-left: $padding-tbl-cell + $hpadding-txt; - padding-right: $padding-tbl-cell + $hpadding-txt; + thead { + position: sticky; + top: 0; + z-index: 1; // TODO: Cover .popout and .vertical-ellipsis-menu, but only when sticky + + th.with-input { + padding-left: $padding-tbl-cell + $hpadding-txt; + padding-right: $padding-tbl-cell + $hpadding-txt; + } } // Row hover