fix(module:drawer): drawer content cannot scroll (NG-ZORRO#2120)

close: NG-ZORRO#2119
hsuanxyz · Sep 17, 2018 · 5c02b3d · 5c02b3d
1 parent 2d05fd4
commit 5c02b3d
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/components/drawer/doc/index.en-US.md b/components/drawer/doc/index.en-US.md
@@ -23,7 +23,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | `[nzMask]` | Whether to show mask or not. | `boolean` | `true` |
 | `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` |
 | `[nzMaskStyle]` | Style for Drawer's mask element. | `object` | `{}` |
-| `[nzBodyStyle]` | Body style for modal body element. Such as height, padding etc. | `object` | `{}` |
+| `[nzBodyStyle]` | Body style for drawer body element. Such as height, padding etc. | `object` | `{}` |
 | `[nzTitle]` | The title for Drawer. | `string`  `TemplateRef<{}>` | - |
 | `[nzVisible]` | Whether the Drawer dialog is visible or not. | `boolean` | `false` |
 | `[nzPlacement]` | The placement of the Drawer. | `'top'` `'right'` `'bottom'` `'left'` | `'right'` |

diff --git a/components/drawer/doc/index.zh-CN.md b/components/drawer/doc/index.zh-CN.md
@@ -24,7 +24,7 @@ title: Drawer
 | `[nzMaskClosable]` | 点击蒙层是否允许关闭 | `boolean` | `true` |
 | `[nzMask]` | 是否展示遮罩 | `boolean` | `true` |
 | `[nzMaskStyle]` | 遮罩样式 | `object` | `{}` |
-| `[nzBodyStyle]` | Modal body 样式 | `object` | `{}` |
+| `[nzBodyStyle]` | Drawer body 样式 | `object` | `{}` |
 | `[nzTitle]` | 标题 | `string`  `TemplateRef<{}>` | - |
 | `[nzVisible]` | Drawer 是否可见 | `boolean` | - |
 | `[nzPlacement]` | 抽屉的方向 | `'top'` `'right'` `'bottom'` `'left'` | `'right'` |

diff --git a/components/drawer/nz-drawer.component.html b/components/drawer/nz-drawer.component.html
@@ -13,7 +13,9 @@
          [style.height]="height"
          [style.transform]="transform">
       <div class="ant-drawer-content">
-        <div class="ant-drawer-wrapper-body">
+        <div class="ant-drawer-wrapper-body"
+          [style.overflow]="isLeftOrRight ? 'auto' : null"
+          [style.height]="isLeftOrRight ? '100%' : null">
           <div *ngIf="nzTitle" class="ant-drawer-header">
             <div class="ant-drawer-title">
               <ng-container [ngSwitch]="true">

diff --git a/components/drawer/nz-drawer.spec.ts b/components/drawer/nz-drawer.spec.ts
@@ -284,6 +284,13 @@ describe('NzDrawerComponent', () => {
     fixture.detectChanges();
   });
 
+  it('should allow scroll', () => {
+    component.placement = 'right';
+    component.open();
+    fixture.detectChanges();
+    expect((overlayContainerElement.querySelector('.ant-drawer .ant-drawer-wrapper-body') as HTMLElement).style.overflow).toBe('auto');
+    expect((overlayContainerElement.querySelector('.ant-drawer .ant-drawer-wrapper-body') as HTMLElement).style.height).toBe('100%');
+  });
 });
 
 @Component({