Ui/fix/selectList-sticky-header-fix (#1084)

* selectList sticky header

* selectList changed & servicemap adapted

* ignore eslint

Co-authored-by: Leon <>
Co-authored-by: AmitUp9 <96980485+AmitUp9@users.noreply.github.com>

ui-common/src/components/ServiceMapModal/ServiceMapModal.module.sass

@@ -67,7 +67,6 @@
   height: 100%
   display: flex
   flex-direction: column
-  margin-right: 10px
   width: 100%
   border-radius: 4px
 
@@ -82,17 +81,18 @@
   margin-top: 10px
   margin-right: 10px
 
-.protocolsFilterList, .servicesFilter
+.card
   background: white
   padding: 10px
   border-radius: 4px
   user-select: none
+  box-shadow: 0px 1px 5px #979797
 
-.servicesFilter
+.servicesFilterWrapper
-  margin-top: 10px
+  margin-top: 20px
+  margin-bottom: 3px
   height: 100%
   overflow: hidden
-  border-radius: 4px
 
-  & .servicesFilterList
+.servicesFilterList
-    height: calc(100% - 30px - 52px)
+  height: calc(100% - 30px - 52px)

ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx

@@ -158,6 +158,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
         if (checkedProtocols.length === 0) {
             setCheckedProtocols(getProtocolsForFilter.map(x => x.key))
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getProtocolsForFilter])
 
     useEffect(() => {
@@ -217,12 +218,12 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
                         <div className={styles.filterSection + ` ${isFilterClicked ? styles.show : ""}`}>
                             <Resizeable minWidth={170} maxWidth={320}>
                                 <div className={styles.filterWrapper}>
-                                    <div className={styles.protocolsFilterList}>
+                                    <div className={styles.card}>
                                         <SelectList items={getProtocolsForFilter} checkBoxWidth="5%" tableName={"PROTOCOLS"} multiSelect={true}
                                             checkedValues={checkedProtocols} setCheckedValues={onProtocolsChange} tableClassName={styles.filters}
                                             inputSearchClass={styles.servicesFilterSearch} isFilterable={false}/>
                                     </div>
-                                    <div className={styles.servicesFilter}>
+                                    <div className={styles.servicesFilterWrapper + ` ${styles.card}`}>
                                         <div className={styles.servicesFilterList}>
                                             <SelectList items={getServicesForFilter} tableName={"SERVICES"} tableClassName={styles.filters} multiSelect={true}
                                                 checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} inputSearchClass={styles.servicesFilterSearch}/>

ui-common/src/components/UI/SelectList.tsx

@@ -85,7 +85,7 @@ const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], mul
 
     const tableBody = filteredValues.length === 0 ?
         <tr>
-            <td colSpan={2}>
+            <td colSpan={2} className={styles.displayBlock}>
                 <NoDataMessage messageText={noItemsMessage} />
             </td>
         </tr>

ui-common/src/components/UI/style/SelectList.module.sass

@@ -1,44 +1,70 @@
 @import '../../../variables.module'
 @import '../../../components'
 
-
 .selectListTable
-    overflow: auto
-    height: 100%
     user-select: none // when resizble moved we get unwanted beheviour
+    height: 100%
 
     table
         width: 100%
-        margin-top: 20px
         border-collapse: collapse
+        table-layout: fixed
+        height: 100%
+        display: flex
+        flex-flow: column
+        height: 100%
 
-        th
+    thead
-            color: $blue-gray
+        display: table
-            text-align: left
+        table-layout: fixed
-            padding: 10px
+        flex: 0 0 auto
-            position: sticky
+        width: calc(100% - 0.9em)
-            top: 0
-            background: $main-background-color
-            font-size: 12px
 
-        tr
+    tbody
-            border-bottom-width: 1px
+        display: block
-            border-bottom-color: $data-background-color
+        overflow: auto
-            border-bottom-style: solid
+        width: 100%
-            width: 100%
+        height: 100%
+        flex: 1 1 auto
 
-        td
+    tbody tr:hover
-            color: $light-gray
+        background: $header-background-color
-            padding: 10px
+
-            font-size: 11px
+    th
-            font-weight: 600
+        color: $blue-gray
-            padding-top: 5px
+        text-align: left
-            padding-bottom: 5px
+        padding: 10px
+        background: $main-background-color
+        font-size: 12px
+
+    tr
+        border-bottom-width: 1px
+        border-bottom-color: $data-background-color
+        border-bottom-style: solid
+        width: 100%
+        display: block
+        position: relative
+        display: table
+        table-layout: fixed
+
+    td
+        color: $light-gray
+        padding: 10px
+        font-size: 11px
+        font-weight: 600
+        padding-top: 5px
+        padding-bottom: 5px
 
 .nowrap
     white-space: nowrap
 
 .totalSelected
-  font-size: 12px
+    font-size: 12px
-  color: $light-blue-color
+    color: $light-blue-color
-  font-weight: 700
+    font-weight: 700
+
+.displayBlock
+    display: block
+
+.filterInput
+    margin-bottom: 20px