Popup: scrollbar appears when content does not overflow the height (T…

…1253645) (#28779)
DevExpress · Jan 20, 2025 · 53ca6c5 · 53ca6c5
1 parent 74b9d4c
commit 53ca6c5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/base/_popup.scss b/packages/devextreme-scss/scss/widgets/base/_popup.scss
@@ -42,6 +42,7 @@
   }
 
   & .dx-popup-content > .dx-template-wrapper {
+    display: flow-root;
     height: 100%;
     width: 100%;
   }

diff --git a/packages/devextreme/js/__internal/ui/popup/m_popup.ts b/packages/devextreme/js/__internal/ui/popup/m_popup.ts
@@ -46,7 +46,7 @@ const POPUP_FULL_SCREEN_CLASS = 'dx-popup-fullscreen';
 const POPUP_FULL_SCREEN_WIDTH_CLASS = 'dx-popup-fullscreen-width';
 const POPUP_NORMAL_CLASS = 'dx-popup-normal';
 const POPUP_CONTENT_CLASS = 'dx-popup-content';
-const POPUP_CONTENT_SCROLLABLE_CLASS = 'dx-popup-content-scrollable';
+export const POPUP_CONTENT_SCROLLABLE_CLASS = 'dx-popup-content-scrollable';
 
 const DISABLED_STATE_CLASS = 'dx-state-disabled';
 const POPUP_DRAGGABLE_CLASS = 'dx-popup-draggable';
@@ -58,7 +58,7 @@ const POPUP_BOTTOM_CLASS = 'dx-popup-bottom';
 
 const POPUP_HAS_CLOSE_BUTTON_CLASS = 'dx-has-close-button';
 
-const TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper';
+export const TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper';
 
 const POPUP_CONTENT_FLEX_HEIGHT_CLASS = 'dx-popup-flex-height';
 const POPUP_CONTENT_INHERIT_HEIGHT_CLASS = 'dx-popup-inherit-height';

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js
@@ -25,6 +25,10 @@ import themes from 'ui/themes';
 import executeAsyncMock from '../../helpers/executeAsyncMock.js';
 import visibilityChangeUtils from 'common/core/events/visibility_change';
 import domAdapter from '__internal/core/m_dom_adapter';
+import {
+    TEMPLATE_WRAPPER_CLASS,
+    POPUP_CONTENT_SCROLLABLE_CLASS,
+} from '__internal/ui/popup/m_popup';
 
 import 'generic_light.css!';
 import 'ui/popup';
@@ -37,7 +41,6 @@ const IS_IOS_DEVICE = devices.real().platform === 'ios';
 const IS_OLD_SAFARI = IS_SAFARI && compareVersions(browser.version, [11]) < 0;
 const PREVENT_SAFARI_SCROLLING_CLASS = 'dx-prevent-safari-scrolling';
 
-const POPUP_CONTENT_SCROLLABLE_CLASS = 'dx-popup-content-scrollable';
 const TOOLBAR_LABEL_CLASS = 'dx-toolbar-label';
 
 themes.setDefaultTimeout(0);
@@ -694,7 +697,7 @@ QUnit.module('dimensions', {
                     'title': {
                         render: function(args) {
                             const $element = $('<span>')
-                                .addClass('dx-template-wrapper')
+                                .addClass(TEMPLATE_WRAPPER_CLASS)
                                 .text('text');
 
                             return $element.get(0);
@@ -1094,6 +1097,25 @@ QUnit.module('options changed callbacks', {
         assert.strictEqual(minHeight, '0px', 'minHeight is inherited correctly');
     });
 
+    QUnit.test('Template wrapper element uses "display: flow-root" to prevent the appearance of scrollbar (T1253645)', function(assert) {
+        const popup = $('#popup').dxPopup({
+            visible: true,
+            width: 300,
+            height: 300,
+            showTitle: false,
+            contentTemplate() {
+                return $('<div>')
+                    .addClass(TEMPLATE_WRAPPER_CLASS)
+                    .append('<p>test content</p>');
+            }
+        }).dxPopup('instance');
+
+        const $templateWrapper = popup.$content().find(`.${TEMPLATE_WRAPPER_CLASS}`);
+        const overflow = $templateWrapper.css('display');
+
+        assert.strictEqual(overflow, 'flow-root', 'overflow property is set to hidden');
+    });
+
     QUnit.test('popup height should support TreeView with Search if height = auto (T724029)', function(assert) {
         if(IS_OLD_SAFARI) {
             assert.expect(0);