Fixed #882 - Dialog component scrollbar shift

primefaces · Sep 25, 2023 · e204de3 · e204de3
1 parent e0fe133
commit e204de3
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/components/lib/base/Base.js b/components/lib/base/Base.js
@@ -19,6 +19,7 @@ const styles = `
 
 .p-overflow-hidden {
     overflow: hidden;
+    padding-right: var(--scrollbar-width);
 }
 `;
 

diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
@@ -213,11 +213,13 @@ export default {
         enableDocumentSettings() {
             if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
+                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             }
         },
         unbindDocumentState() {
             if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                document.body.style.removeProperty('--scrollbar-width');
             }
         },
         onKeyDown(event) {