Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-datetime-picker): fix scrollbar issue in IE11 #2154

Merged
merged 4 commits into from
Sep 1, 2020
Merged

fix(ui5-datetime-picker): fix scrollbar issue in IE11 #2154

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b67134b
DateTimePicker - fixed scrollbar issue in IE11
NHristov-sap Aug 28, 2020
751049d
lint fix
NHristov-sap Aug 28, 2020
0fe5072
fixing comments
NHristov-sap Aug 28, 2020
a2a8d2e
fixing comments
NHristov-sap Aug 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/main/src/DateTimePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Copy link
Member

@ilhan007 ilhan007 Aug 28, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general we add styles in different way, more declarative as we make use of the templates.

Example:

// DatePicker.js
get styles() {
		return {
			main: {
				width: "100%",
			},
		};
	}
<!-- DatePicker.hbs -->
<div
		style="{{styles.main}}"
>

And second, .ui5-popup-content element belongs to the Popover and it is too rough to apply styles from the DateTimePicker.

I suggest adding a private (in sense of protected) property in the Popover.js that defines if overflow:hidden should be added. And then set this property to the "<ui5-responsive-popover" within DatePicker.hbs (the template is reused for the DateTimePicker) in context if IE.
In addition to the DateTimePicker, test if everything looks good for the DatePicker as well.

How to name the property? It defines whether the content is scrollable. Also, we should have in mind that all Boolean props in HTML are "false" by default. Then it should be the opposite of scrollable and contentScrollable (because this should be the default state). So, I guess "disableScrolling" is fine.

// Popover.js
/**
 * Defines whether the content is scrollable.
 *
 * @type {boolean}
 * @defaultvalue false
 * @private
 */
disableScrolling: {
   type: Boolean,
},
// PopupsCommon.css
:host([disable-scrolling]) .ui5-popup-content {
    overflow: hidden;
}
// DatePicker.js
get _isIE() {
		return isIE();
}
<!-- DatePickerPopover.hbs -->
<ui5-responsive-popover
    ?disable-scrolling="{{_isIE}}"
    no-arrow
    with-padding
    no-stretch

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanx, fixed as requested

}
}

/**
Expand Down