Fix Filter Dropdowns not appearing properly (#144)

bcgov · Oct 3, 2023 · 93295aa · 93295aa
1 parent 6adbb02
commit 93295aa
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 4 deletions.
diff --git a/frontend/src/app/common/api.ts b/frontend/src/app/common/api.ts
@@ -98,7 +98,7 @@ export const post = <T, M = {}>(
 		axios
 			.post(url, params, config)
 			.then((response: AxiosResponse) => {
-				resolve(response.data as T);
+        resolve(response.data as T);
 			})
 			.catch((error: AxiosError) => {
 				if (parameters.enableNotification) {

diff --git a/frontend/src/app/components/containers/complaints/complaint-filter.tsx b/frontend/src/app/components/containers/complaints/complaint-filter.tsx
@@ -86,6 +86,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="nature-of-complaint-select-id"
                 value={natureOfComplaint}
               />
@@ -102,6 +106,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="species-select-id"
                 value={species}
               />
@@ -187,6 +195,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="status-select-id"
                 value={status}
               />
@@ -215,6 +227,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="violation-type-select-id"
                 value={violationType}
               />
@@ -300,6 +316,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="status-select-id"
                 value={status}
               />
@@ -336,6 +356,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 value={region}
                 id="region-select-filter-id"
               />
@@ -352,6 +376,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="zone-select-id"
                 value={zone}
               />
@@ -369,6 +397,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="community-select-id"
                 value={community}
               />
@@ -386,6 +418,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="officer-select-id"
                 value={officer}
               />

diff --git a/frontend/src/assets/sass/complaint.scss b/frontend/src/assets/sass/complaint.scss
@@ -341,6 +341,11 @@
   box-shadow: 0px 0px 0px 4px $blue-300 !important;
 }
 
+//Need these to make sure the filters show up on top of other frozen items
+.top-layer-select, .react-datepicker-popper {
+  z-index: 7000 !important;
+}
+
 .comp-details-edit-container {
   display: flex;
 }
@@ -705,6 +710,7 @@
   margin-top: -7px;
 }
 
+
 .no-bullets {
   list-style-type: none; /* Remove bullets */
   padding: 0; /* Remove padding */
@@ -922,6 +928,12 @@
   display: none;
 }
 
+//Toasts Gets the top layer
+.Toastify {
+  z-index: 10000;
+  position: relative;
+}
+
 .Toastify__toast--error {
   border: 1px solid #EEA8AB;
   border-radius: 3px !important;

diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss
@@ -9,22 +9,22 @@
   position: fixed;
   width: 100%;
   top: 0;
-  z-index: 10000;
+  z-index: 9000;
 }
 
 .fixed-nav-header {
   position: sticky !important;
   padding-bottom: 0px !important;
   top: 72px; // Header (72px)
   background-color: $white;
-  z-index: 9000;
+  z-index: 8000;
 }
 
 .fixed-filter-header {
   position: sticky;
   top: 120px; // Header (72px) + Tabs (48px) 
   background-color: $white;
-  z-index: 9000;
+  z-index: 6000;
 }
 
 .fixed-table-header {