From 4219e214e1456eacfb8fab8eb4aa62599ea7b083 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 4 Jun 2019 15:44:13 +0800 Subject: [PATCH 1/3] fix(Table): Hide header extra scrollbar close ant-design/ant-design#4637 close ant-design/ant-design#14211 --- assets/index.less | 10 ++++++++-- src/BodyTable.js | 2 +- src/HeadTable.js | 4 ++-- src/utils.js | 4 +++- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/assets/index.less b/assets/index.less index 115861aee..22403037d 100644 --- a/assets/index.less +++ b/assets/index.less @@ -39,13 +39,19 @@ } &-fixed-header &-scroll &-header { - overflow-x: scroll; padding-bottom: 20px; margin-bottom: -20px; - overflow-y: scroll; + overflow: scroll; box-sizing: border-box; } + &-hide-scrollbar { + scrollbar-color: transparent transparent; + &::-webkit-scrollbar { + background-color: transparent; + } + } + // https://github.com/ant-design/ant-design/issues/10828 &-fixed-columns-in-body { visibility: hidden; diff --git a/src/BodyTable.js b/src/BodyTable.js index aaf39b9f5..53074b5b6 100644 --- a/src/BodyTable.js +++ b/src/BodyTable.js @@ -40,7 +40,7 @@ export default function BodyTable(props, { table }) { useFixedHeader = true; // Add negative margin bottom for scroll bar overflow bug - const scrollbarWidth = measureScrollbar(); + const scrollbarWidth = measureScrollbar({ prefixCls }); if (scrollbarWidth > 0 && fixed) { bodyStyle.marginBottom = `-${scrollbarWidth}px`; bodyStyle.paddingBottom = '0px'; diff --git a/src/HeadTable.js b/src/HeadTable.js index 80618f9c1..a94cb62d0 100644 --- a/src/HeadTable.js +++ b/src/HeadTable.js @@ -13,7 +13,7 @@ export default function HeadTable(props, { table }) { if (scroll.y) { useFixedHeader = true; // Add negative margin bottom for scroll bar overflow bug - const scrollbarWidth = measureScrollbar('horizontal'); + const scrollbarWidth = measureScrollbar({ direction: 'horizontal', prefixCls }); if (scrollbarWidth > 0 && !fixed) { headStyle.marginBottom = `-${scrollbarWidth}px`; headStyle.paddingBottom = '0px'; @@ -28,7 +28,7 @@ export default function HeadTable(props, { table }) {
diff --git a/src/utils.js b/src/utils.js index d16f71496..699f86e94 100644 --- a/src/utils.js +++ b/src/utils.js @@ -14,7 +14,7 @@ const scrollbarMeasure = { // This const is used for colgroup.col internal props. And should not provides to user. export const INTERNAL_COL_DEFINE = 'RC_TABLE_INTERNAL_COL_DEFINE'; -export function measureScrollbar(direction = 'vertical') { +export function measureScrollbar({ direction = 'vertical', prefixCls }) { if (typeof document === 'undefined' || typeof window === 'undefined') { return 0; } @@ -28,6 +28,8 @@ export function measureScrollbar(direction = 'vertical') { Object.keys(scrollbarMeasure).forEach(scrollProp => { scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp]; }); + // apply hide scrollbar className ahead + scrollDiv.className = `${prefixCls}-hide-scrollbar`; // Append related overflow style if (isVertical) { scrollDiv.style.overflowY = 'scroll'; From 11a31cda1dbedeefd3b43485eece184581293fca Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 4 Jun 2019 15:48:59 +0800 Subject: [PATCH 2/3] :white_check_mark: update snapshots --- tests/__snapshots__/Table.spec.js.snap | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/tests/__snapshots__/Table.spec.js.snap b/tests/__snapshots__/Table.spec.js.snap index c78c715dd..effea0eb4 100644 --- a/tests/__snapshots__/Table.spec.js.snap +++ b/tests/__snapshots__/Table.spec.js.snap @@ -246,7 +246,7 @@ exports[`Table custom components renders fixed column and header correctly 1`] = class="rc-table-scroll" >
Date: Tue, 4 Jun 2019 16:02:36 +0800 Subject: [PATCH 3/3] implement #304 --- src/BodyTable.js | 2 +- src/utils.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BodyTable.js b/src/BodyTable.js index 53074b5b6..ffe606332 100644 --- a/src/BodyTable.js +++ b/src/BodyTable.js @@ -40,7 +40,7 @@ export default function BodyTable(props, { table }) { useFixedHeader = true; // Add negative margin bottom for scroll bar overflow bug - const scrollbarWidth = measureScrollbar({ prefixCls }); + const scrollbarWidth = measureScrollbar({ direction: 'horizontal', prefixCls }); if (scrollbarWidth > 0 && fixed) { bodyStyle.marginBottom = `-${scrollbarWidth}px`; bodyStyle.paddingBottom = '0px'; diff --git a/src/utils.js b/src/utils.js index 699f86e94..8da2c10c1 100644 --- a/src/utils.js +++ b/src/utils.js @@ -29,7 +29,7 @@ export function measureScrollbar({ direction = 'vertical', prefixCls }) { scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp]; }); // apply hide scrollbar className ahead - scrollDiv.className = `${prefixCls}-hide-scrollbar`; + scrollDiv.className = `${prefixCls}-hide-scrollbar scroll-div-append-to-body`; // Append related overflow style if (isVertical) { scrollDiv.style.overflowY = 'scroll';