Fixing style errors caused by too low height

smileluo · Jul 13, 2018 · c8217e0 · c8217e0
1 parent 78e8ab5
commit c8217e0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/components/drawer/demo/from-drawer.md b/components/drawer/demo/from-drawer.md
@@ -58,6 +58,11 @@ class App extends React.Component {
           onClose={this.onClose}
           maskClosable={false}
           visible={this.state.visible}
+          style={{
+            height: 'calc(100% - 55px)',
+            overflow: 'auto',
+            paddingBottom: 53,
+          }}
         >
           <Form layout="vertical" hideRequiredMark>
             <Row gutter={16}>
@@ -159,6 +164,7 @@ class App extends React.Component {
               padding: '10px 16px',
               textAlign: 'right',
               left: 0,
+              background: '#fff',
               borderRadius: '0 0 4px 4px',
             }}
           >

diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
@@ -76,7 +76,8 @@ export default class Drawer extends React.Component<
   }
 
   renderBody = () => {
-    if (this.props.destroyOnClose && !this.props.visible) {
+    const { destroyOnClose , visible, width, placement } = this.props;
+    if (destroyOnClose && !visible) {
       return null;
     }
     const { prefixCls, title, closable } = this.props;
@@ -100,7 +101,14 @@ export default class Drawer extends React.Component<
         </button>
       );
     }
-    const containerStyle = { width: this.props.width };
+    let containerStyle: React.CSSProperties = { width };
+    if (placement === 'left' || placement === 'right') {
+      containerStyle = {
+        overflow: 'auto',
+        height: '100%',
+        width,
+      };
+    }
     return (
       <div style={containerStyle}>
         {header}