Add dynamic style.top value to the search result component

1.Fixes goharbor#20608 Signed-off-by: Shijun Sun <[email protected]>
AllForNothing · Aug 2, 2024 · f1cda5f · f1cda5f
1 parent 295e075
commit f1cda5f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/portal/src/app/shared/components/global-search/search-result.component.html b/src/portal/src/app/shared/components/global-search/search-result.component.html
@@ -1,4 +1,4 @@
-<div class="search-overlay" *ngIf="state">
+<div [style.top.px]="getTopValue()" class="search-overlay" *ngIf="state">
  <div id="placeholder1"></div>
  <div class="search-header">
  <a href="javascript:void(0)" (click)="close()"

diff --git a/src/portal/src/app/shared/components/global-search/search-result.component.ts b/src/portal/src/app/shared/components/global-search/search-result.component.ts
@@ -176,4 +176,11 @@ export class SearchResultComponent implements OnInit, OnDestroy {
  }
  );
  }
+ getTopValue(): number {
+ const headerHeight: number =
+ document.querySelector('navigator')?.clientHeight || 0;
+ const bannerHeight: number =
+ document.querySelector('app-app-level-alerts')?.clientHeight || 0;
+ return headerHeight + bannerHeight;
+ }
 }
diff --git a/src/portal/src/app/shared/components/global-search/search.component.scss b/src/portal/src/app/shared/components/global-search/search.component.scss
@@ -8,7 +8,6 @@
  z-index: 999;
  box-sizing: border-box;
  background: #fafafa;
- top: 60px;
  left: 0;
  padding-left: 36px;
  padding-right: 36px;