fix(AnalyticalTable): remove double scrollbars on windows (#283)

SAP · Jan 22, 2020 · b269da3 · b269da3
1 parent bdf2c95
commit b269da3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts
@@ -37,7 +37,6 @@ const styles = ({ parameters }: JSSTheme) => ({
   tbody: {
     position: 'relative',
     zIndex: 0,
-    overflowX: 'auto',
     backgroundColor: parameters.sapUiListBackground
   },
   alternateRowColor: {
@@ -99,6 +98,10 @@ const styles = ({ parameters }: JSSTheme) => ({
     whiteSpace: 'nowrap',
     alignItems: 'center'
   },
+  virtualTableBody: {
+    overflowX: 'hidden !important',
+    overflowY: 'auto !important'
+  },
   noDataContainer: {
     display: 'flex',
     justifyContent: 'center',

diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
@@ -296,6 +296,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
         </div>
       </header>
       <div
+        class="AnalyticalTable--virtualTableBody-"
         style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -769,6 +770,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
         </div>
       </header>
       <div
+        class="AnalyticalTable--virtualTableBody-"
         style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -1854,6 +1856,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
         </div>
       </header>
       <div
+        class="AnalyticalTable--virtualTableBody-"
         style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -2356,6 +2359,7 @@ exports[`AnalyticalTable custom row height 1`] = `
         </div>
       </header>
       <div
+        class="AnalyticalTable--virtualTableBody-"
         style="position: relative; height: 300px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -3135,6 +3139,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
         </div>
       </header>
       <div
+        class="AnalyticalTable--virtualTableBody-"
         style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
@@ -3608,6 +3613,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
         </div>
       </header>
       <div
+        class="AnalyticalTable--virtualTableBody-"
         style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div

diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
@@ -79,6 +79,7 @@ export const VirtualTableBody = (props) => {
 
   return (
     <FixedSizeList
+      className={classes.virtualTableBody}
       ref={reactWindowRef}
       height={tableBodyHeight}
       width={totalColumnsWidth}