From 53ca6c589f527ad3b72815e4b03db2f1fa343367 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Mon, 20 Jan 2025 19:38:32 +0400
Subject: [PATCH] Popup: scrollbar appears when content does not overflow the
height (T1253645) (#28779)
---
.../scss/widgets/base/_popup.scss | 1 +
.../js/__internal/ui/popup/m_popup.ts | 4 +--
.../DevExpress.ui.widgets/popup.tests.js | 26 +++++++++++++++++--
3 files changed, 27 insertions(+), 4 deletions(-)
diff --git a/packages/devextreme-scss/scss/widgets/base/_popup.scss b/packages/devextreme-scss/scss/widgets/base/_popup.scss
index 19931714fe72..4bd82640b447 100644
--- 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
index fac7d0cc9259..21f5bc8f36a0 100644
--- 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
index 44acf93f9317..d23268990570 100644
--- 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);