From b67134bea429f814138e21c09db984b6e8f34e5f Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Fri, 28 Aug 2020 15:16:32 +0300 Subject: [PATCH 1/4] DateTimePicker - fixed scrollbar issue in IE11 --- packages/main/src/DateTimePicker.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/main/src/DateTimePicker.js b/packages/main/src/DateTimePicker.js index dd236a7d46f6..41eba8b468be 100644 --- a/packages/main/src/DateTimePicker.js +++ b/packages/main/src/DateTimePicker.js @@ -7,6 +7,7 @@ import { isLeft, isRight, } from "@ui5/webcomponents-base/dist/Keys.js"; +import { isIE } from "@ui5/webcomponents-base/dist/Device.js"; import Button from "./Button.js"; import ToggleButton from "./ToggleButton.js"; import SegmentedButton from "./SegmentedButton.js"; @@ -250,6 +251,9 @@ class DateTimePicker extends DatePicker { this.expandHoursSlider(); this.storePreviousValue(); this._slidersDomRefs = await this.slidersDomRefs(); + if (isIE()) { + (await this.getPicker()).shadowRoot.querySelector(".ui5-popup-content").style.overflow="hidden"; + } } /** From 751049dae4bde989e9ebd90a18f045763fca37cd Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Fri, 28 Aug 2020 15:24:11 +0300 Subject: [PATCH 2/4] lint fix --- packages/main/src/DateTimePicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/DateTimePicker.js b/packages/main/src/DateTimePicker.js index 41eba8b468be..67a98addb273 100644 --- a/packages/main/src/DateTimePicker.js +++ b/packages/main/src/DateTimePicker.js @@ -252,7 +252,7 @@ class DateTimePicker extends DatePicker { this.storePreviousValue(); this._slidersDomRefs = await this.slidersDomRefs(); if (isIE()) { - (await this.getPicker()).shadowRoot.querySelector(".ui5-popup-content").style.overflow="hidden"; + (await this.getPicker()).shadowRoot.querySelector(".ui5-popup-content").style.overflow = "hidden"; } } From 0fe5072530e8ac09ae52e904ed1ebd219c5a18df Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Fri, 28 Aug 2020 17:07:30 +0300 Subject: [PATCH 3/4] fixing comments --- packages/main/src/DatePicker.js | 17 ++++++++++++++++- packages/main/src/DatePickerPopover.hbs | 1 + packages/main/src/DateTimePicker.js | 4 ---- packages/main/src/themes/PopupsCommon.css | 4 ++++ 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index 90e291051f5a..1a479a9fac1a 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -11,7 +11,7 @@ import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDat import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js"; import { isShow, isF4 } from "@ui5/webcomponents-base/dist/Keys.js"; -import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; +import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js"; import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import "@ui5/webcomponents-icons/dist/icons/appointment-2.js"; import "@ui5/webcomponents-icons/dist/icons/decline.js"; @@ -243,6 +243,17 @@ const metadata = { defaultValue: "", }, + /** + * Defines whether content is scrollable. + * + * @type {boolean} + * @defaultvalue false + * @public + */ + disableScrolling: { + type: Boolean, + }, + _isPickerOpen: { type: Boolean, noAttribute: true, @@ -661,6 +672,10 @@ class DatePicker extends UI5Element { return this.phone; } + get _isIE() { + return isIE(); + } + getFormat() { if (this._isPattern) { this._oDateFormat = DateFormat.getInstance({ diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs index 625ae8eeefe7..b33bd593d82a 100644 --- a/packages/main/src/DatePickerPopover.hbs +++ b/packages/main/src/DatePickerPopover.hbs @@ -4,6 +4,7 @@ stay-open-on-scroll="{{_respPopoverConfig.stayOpenOnScroll}}" placement-type="Bottom" horizontal-align="Left" + ?disable-scrolling="{{_isIE}}" no-arrow with-padding no-stretch diff --git a/packages/main/src/DateTimePicker.js b/packages/main/src/DateTimePicker.js index 67a98addb273..dd236a7d46f6 100644 --- a/packages/main/src/DateTimePicker.js +++ b/packages/main/src/DateTimePicker.js @@ -7,7 +7,6 @@ import { isLeft, isRight, } from "@ui5/webcomponents-base/dist/Keys.js"; -import { isIE } from "@ui5/webcomponents-base/dist/Device.js"; import Button from "./Button.js"; import ToggleButton from "./ToggleButton.js"; import SegmentedButton from "./SegmentedButton.js"; @@ -251,9 +250,6 @@ class DateTimePicker extends DatePicker { this.expandHoursSlider(); this.storePreviousValue(); this._slidersDomRefs = await this.slidersDomRefs(); - if (isIE()) { - (await this.getPicker()).shadowRoot.querySelector(".ui5-popup-content").style.overflow = "hidden"; - } } /** diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css index 14f82cca8e41..d30d38544e09 100644 --- a/packages/main/src/themes/PopupsCommon.css +++ b/packages/main/src/themes/PopupsCommon.css @@ -80,3 +80,7 @@ :host(:not([header-text])) .ui5-popup-header-text { display: none; } + +:host([disable-scrolling]) .ui5-popup-content { + overflow: hidden; +} From a2a8d2e58feb8a91b828713b3aaad2d678cc99e3 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Fri, 28 Aug 2020 17:30:35 +0300 Subject: [PATCH 4/4] fixing comments --- packages/main/src/DatePicker.js | 11 ----------- packages/main/src/DatePickerPopover.hbs | 2 +- packages/main/src/Popover.js | 11 +++++++++++ 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index 1a479a9fac1a..21a363a5c567 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -243,17 +243,6 @@ const metadata = { defaultValue: "", }, - /** - * Defines whether content is scrollable. - * - * @type {boolean} - * @defaultvalue false - * @public - */ - disableScrolling: { - type: Boolean, - }, - _isPickerOpen: { type: Boolean, noAttribute: true, diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs index b33bd593d82a..a9e25ebbefc5 100644 --- a/packages/main/src/DatePickerPopover.hbs +++ b/packages/main/src/DatePickerPopover.hbs @@ -4,7 +4,7 @@ stay-open-on-scroll="{{_respPopoverConfig.stayOpenOnScroll}}" placement-type="Bottom" horizontal-align="Left" - ?disable-scrolling="{{_isIE}}" + ?disable-scrolling="{{_isIE}}" no-arrow with-padding no-stretch diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js index c1fb83e2a6e3..08c1ed031c10 100644 --- a/packages/main/src/Popover.js +++ b/packages/main/src/Popover.js @@ -129,6 +129,17 @@ const metadata = { type: Boolean, }, + /** + * Defines whether the content is scrollable. + * + * @type {boolean} + * @defaultvalue false + * @private + */ + disableScrolling: { + type: Boolean, + }, + /** * Sets the X translation of the arrow *