From c8217e0bad2e96e66f29b6f98c32af26e2cd7053 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Thu, 28 Jun 2018 17:54:03 +0800 Subject: [PATCH] Fixing style errors caused by too low height --- components/drawer/demo/from-drawer.md | 6 ++++++ components/drawer/index.tsx | 12 ++++++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/components/drawer/demo/from-drawer.md b/components/drawer/demo/from-drawer.md index 535de794dc..05670ad844 100644 --- 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, + }} >
@@ -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 index d7837dd954..a9dadaea6f 100644 --- 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< ); } - const containerStyle = { width: this.props.width }; + let containerStyle: React.CSSProperties = { width }; + if (placement === 'left' || placement === 'right') { + containerStyle = { + overflow: 'auto', + height: '100%', + width, + }; + } return (
{header}