Fix #5508/#5487: TreeTable scrollable fixes (#5511)

primefaces · Dec 4, 2023 · 6e8730c · 6e8730c
1 parent c4f5a70
commit 6e8730c
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/components/lib/treetable/TreeTableScrollableView.js b/components/lib/treetable/TreeTableScrollableView.js
@@ -66,10 +66,10 @@ export const TreeTableScrollableView = React.memo((props) => {
  frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
  }
 
- scrollHeaderBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
+ scrollHeaderBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
 
  if (scrollFooterBoxRef.current) {
- scrollFooterBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
+ scrollFooterBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
  }
 
  if (frozenScrollBody) {
@@ -78,16 +78,20 @@ export const TreeTableScrollableView = React.memo((props) => {
  };
 
  useMountEffect(() => {
- if (!props.frozen) {
- const scrollBarWidth = DomHandler.calculateScrollbarWidth();
+ let el = DomHandler.find(findDataTableContainer(elementRef.current), '[data-pc-section="scrollablebody"]');
+
+ el = el.length > 1 ? el[1] : el[0];
 
+ const scrollBarWidth = DomHandler.calculateScrollbarWidth(el);
+
+ if (!props.frozen) {
  scrollHeaderBoxRef.current.style.marginRight = scrollBarWidth + 'px';
 
  if (scrollFooterBoxRef.current) {
  scrollFooterBoxRef.current.style.marginRight = scrollBarWidth + 'px';
  }
  } else {
- scrollBodyRef.current.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
+ scrollBodyRef.current.style.paddingBottom = scrollBarWidth + 'px';
  }
  });