fix(admin-ui): Make dropdowns scrollable

Fixes #824
vendure-ecommerce · Apr 20, 2021 · e887a2b · e887a2b
1 parent 41b6e5b
commit e887a2b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.scss
@@ -2,9 +2,14 @@
     background-color: hotpink;
 }
 
+.dropdown-content-wrapper {
+}
+
 .dropdown.open > .dropdown-menu {
     position: relative;
     top: 0;
+    height: 100%;
+    overflow-y: auto;
 }
 
 :host {

diff --git a/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.ts b/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.ts
@@ -42,7 +42,9 @@ export type DropdownPosition = 'top-left' | 'top-right' | 'bottom-left' | 'botto
         <ng-template #menu>
             <div class="dropdown open">
                 <div class="dropdown-menu">
-                    <ng-content></ng-content>
+                    <div class="dropdown-content-wrapper">
+                        <ng-content></ng-content>
+                    </div>
                 </div>
             </div>
         </ng-template>
@@ -78,6 +80,7 @@ export class DropdownMenuComponent implements AfterViewInit, OnInit, OnDestroy {
             hasBackdrop: true,
             backdropClass: 'clear-backdrop',
             positionStrategy: this.getPositionStrategy(),
+            maxHeight: '70vh',
         });
         this.menuPortal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
         this.backdropClickSub = this.overlayRef.backdropClick().subscribe(() => {