fix: primefaces#6682

- Ensure element styles set via pt merge with required `xBarRef` and `yBarRef` styles The following styles for "barX" can not be overridden: - width - left - bottom The following styles for "barY" can not be overridden: - height - top - right
gcko · Sep 25, 2024 · a62e878 · a62e878
1 parent f487a2f
commit a62e878
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
@@ -70,14 +70,18 @@ export const ScrollPanel = React.forwardRef((inProps, ref) => {
                 DomHandler.addClass(xBarRef.current, 'p-scrollpanel-hidden');
             } else {
                 DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-hidden');
-                xBarRef.current.style.cssText = 'width:' + Math.max(scrollXRatio.current * 100, 10) + '%; left:' + (contentRef.current.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                xBarRef.current.style.width = Math.max(scrollXRatio.current * 100, 10) + '%';
+                xBarRef.current.style.left = (contentRef.current.scrollLeft / totalWidth) * 100 + '%';
+                xBarRef.current.style.bottom = bottom + 'px';
             }
 
             if (scrollYRatio.current >= 1) {
                 DomHandler.addClass(yBarRef.current, 'p-scrollpanel-hidden');
             } else {
                 DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-hidden');
-                yBarRef.current.style.cssText = 'height:' + Math.max(scrollYRatio.current * 100, 10) + '%; top: calc(' + (contentRef.current.scrollTop / totalHeight) * 100 + '% - ' + xBarRef.current.clientHeight + 'px);right:' + right + 'px;';
+                yBarRef.current.style.height = Math.max(scrollYRatio.current * 100, 10) + '%';
+                yBarRef.current.style.top = 'calc(' + (contentRef.current.scrollTop / totalHeight) * 100 + '% - ' + xBarRef.current.clientHeight + 'px)';
+                yBarRef.current.style.right = right + 'px';
             }
         });
     };