fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(datepicker): quickfix to fix datepicker position in modals

Browse Source
This commit is contained in:
Sarah Vaupel 2019-09-11 17:56:10 +02:00
parent 593a6a72d2
commit 3f9454a7ef
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/utils/form/datepicker.js
View File

@ -3,6 +3,7 @@ import { Utility } from '../../core/utility';
import moment from 'moment'; import moment from 'moment';
const KEYCODE_ESCAPE = 27; const KEYCODE_ESCAPE = 27;
const Z_INDEX_MODAL = 9999;
// INTERNAL (Uni2work specific) formats for formatting dates and/or times // INTERNAL (Uni2work specific) formats for formatting dates and/or times
const FORM_DATE_FORMAT = { const FORM_DATE_FORMAT = {
@ -139,9 +140,14 @@ export class Datepicker {
// initialize tail.datetime (datepicker) instance // initialize tail.datetime (datepicker) instance
this.datepickerInstance = datetime(this._element, { ...datepickerGlobalConfig, ...datepickerConfig }); 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')) { 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 // register this datepicker instance with the formID of the given element in the datepicker collection