Fix incorrect compliance calendar picker zindex

Depending on the browser viewport size, the compliance calendar picker would render underneath the compliance view tab menu. This commit adds a zindex to the calendar picker dropdown to correct this issue. Signed-off-by: Scott Christopherson <scott@scott-christopherson.com>
chef · Oct 27, 2020 · b1e358c · b1e358c
1 parent cb73664
commit b1e358c
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/...c/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.html b/...c/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.html
@@ -70,7 +70,7 @@
       <chef-icon>date_range</chef-icon>
       <span>{{ date | datetime: CHEF_SHORT_DATE }}</span>
     </chef-button>
-    <chef-dropdown [attr.visible]="calendarVisible">
+    <chef-dropdown class="calendar-dropdown" [attr.visible]="calendarVisible">
       <chef-click-outside omit="calendar-btn" (clickOutside)="hideCalendar()">
         <chef-calendar
           [selected]="date.toISOString()"

diff --git a/...c/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.scss b/...c/app/pages/+compliance/+reporting/reporting-searchbar/reporting-searchbar.component.scss
@@ -44,10 +44,11 @@
       }
     }
 
-    chef-dropdown {
+    .calendar-dropdown {
       top: 100%;
       right: 0;
       padding: 0.5em;
+      z-index: 1;
     }
   }
 }