fix(module:menu): fix submenu scrollable

close NG-ZORRO#4837
vthinkxie · Apr 26, 2020 · 21353cc · 21353cc
1 parent 7870e67
commit 21353cc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/components/menu/demo/vertical.ts b/components/menu/demo/vertical.ts
@@ -8,6 +8,21 @@ import { Component } from '@angular/core';
         <ul>
           <li nz-menu-group nzTitle="Item 1">
             <ul>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
+              <li nz-menu-item>Option 1</li>
               <li nz-menu-item>Option 1</li>
               <li nz-menu-item>Option 2</li>
             </ul>

diff --git a/components/menu/submenu.component.ts b/components/menu/submenu.component.ts
@@ -42,7 +42,14 @@ import { NzIsMenuInsideDropDownToken } from './menu.token';
 import { NzMenuModeType, NzMenuThemeType } from './menu.types';
 import { NzSubmenuService } from './submenu.service';
 
-const listOfVerticalPositions = [POSITION_MAP.rightTop, POSITION_MAP.rightBottom, POSITION_MAP.leftTop, POSITION_MAP.leftBottom];
+const listOfVerticalPositions = [
+  POSITION_MAP.rightTop,
+  POSITION_MAP.right,
+  POSITION_MAP.rightBottom,
+  POSITION_MAP.leftTop,
+  POSITION_MAP.left,
+  POSITION_MAP.leftBottom
+];
 const listOfHorizontalPositions = [POSITION_MAP.bottomLeft];
 
 @Component({
@@ -179,9 +186,9 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterContentInit,
 
   onPositionChange(position: ConnectedOverlayPositionChange): void {
     const placement = getPlacementName(position);
-    if (placement === 'rightTop' || placement === 'rightBottom') {
+    if (placement === 'rightTop' || placement === 'rightBottom' || placement === 'right') {
       this.position = 'right';
-    } else if (placement === 'leftTop' || placement === 'leftBottom') {
+    } else if (placement === 'leftTop' || placement === 'leftBottom' || placement === 'left') {
       this.position = 'left';
     }
     this.cdr.markForCheck();