From 593a6a72d2750135dbe6348b53f48b18db6032b5 Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Wed, 11 Sep 2019 17:02:22 +0200 Subject: [PATCH 1/2] fix(datepicker): increase datepicker z-index in modals --- frontend/src/utils/form/datepicker.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index 11d7394bc..acc057502 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -139,6 +139,11 @@ export class Datepicker { // initialize tail.datetime (datepicker) instance this.datepickerInstance = datetime(this._element, { ...datepickerGlobalConfig, ...datepickerConfig }); + // if the input element is in any open modal, increase the z-index of the datepicker + if (this._element.closest('.modal--open')) { + this.datepickerInstance.dt.style.zIndex = 9999; + } + // register this datepicker instance with the formID of the given element in the datepicker collection const formID = this._element.form.id; const elemID = this._element.id; From 3f9454a7ef4ff2303827b692c52151d07a96c67d Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Wed, 11 Sep 2019 17:56:10 +0200 Subject: [PATCH 2/2] fix(datepicker): quickfix to fix datepicker position in modals --- frontend/src/utils/form/datepicker.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/utils/form/datepicker.js b/frontend/src/utils/form/datepicker.js index acc057502..932d3b515 100644 --- a/frontend/src/utils/form/datepicker.js +++ b/frontend/src/utils/form/datepicker.js @@ -3,6 +3,7 @@ import { Utility } from '../../core/utility'; import moment from 'moment'; const KEYCODE_ESCAPE = 27; +const Z_INDEX_MODAL = 9999; // INTERNAL (Uni2work specific) formats for formatting dates and/or times const FORM_DATE_FORMAT = { @@ -139,9 +140,14 @@ export class Datepicker { // initialize tail.datetime (datepicker) instance this.datepickerInstance = datetime(this._element, { ...datepickerGlobalConfig, ...datepickerConfig }); - // if the input element is in any open modal, increase the z-index of the datepicker + // append the datepicker element (dt) to the form + this._element.form.appendChild(this.datepickerInstance.dt); + + // if the input element is in any open modal, increase the z-index of the datepicker and set its position to fixed to avoid repositioning on page scroll + // FIXME: instead of setting the position to fixed, use absolute and reposition (decrease left) if (this._element.closest('.modal--open')) { - this.datepickerInstance.dt.style.zIndex = 9999; + this.datepickerInstance.dt.style.zIndex = Z_INDEX_MODAL; + this.datepickerInstance.dt.style.position = 'fixed'; } // register this datepicker instance with the formID of the given element in the datepicker collection