From 3f9454a7ef4ff2303827b692c52151d07a96c67d Mon Sep 17 00:00:00 2001 From: Sarah Vaupel Date: Wed, 11 Sep 2019 17:56:10 +0200 Subject: [PATCH] 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