From 317ac59f470f661c6db9cb31110eeff3d54fb783 Mon Sep 17 00:00:00 2001 From: Kevin Papst Date: Mon, 7 Mar 2022 14:22:16 +0100 Subject: [PATCH] fix select2 and dropdown width for quick-entry form (#3188) --- assets/js/plugins/KimaiFormSelect.js | 20 ++++++++++++++++--- assets/sass/forms.scss | 5 +++++ assets/sass/selectpicker.scss | 8 +++++++- public/build/app.30368b2e.js | 2 -- public/build/app.7d469ea7.js | 2 ++ ...ICENSE.txt => app.7d469ea7.js.LICENSE.txt} | 0 .../{app.3bc2b4d9.css => app.7efa8299.css} | 2 +- public/build/entrypoints.json | 4 ++-- public/build/manifest.json | 4 ++-- src/Constants.php | 4 ++-- 10 files changed, 38 insertions(+), 13 deletions(-) delete mode 100644 public/build/app.30368b2e.js create mode 100644 public/build/app.7d469ea7.js rename public/build/{app.30368b2e.js.LICENSE.txt => app.7d469ea7.js.LICENSE.txt} (100%) rename public/build/{app.3bc2b4d9.css => app.7efa8299.css} (99%) diff --git a/assets/js/plugins/KimaiFormSelect.js b/assets/js/plugins/KimaiFormSelect.js index d0629061..f7dddba9 100644 --- a/assets/js/plugins/KimaiFormSelect.js +++ b/assets/js/plugins/KimaiFormSelect.js @@ -118,9 +118,13 @@ export default class KimaiFormSelect extends KimaiPlugin { options = {...options, ...{ language: this.getConfiguration('locale').replace('_', '-'), theme: "bootstrap", - matcher: this.matcher + matcher: this.matcher, + dropdownAutoWidth: true, + width: "resolve" }}; + const element = jQuery(node); + if (node.dataset['renderer'] !== undefined && node.dataset['renderer'] === 'color') { const templateResultFunc = function (state) { return jQuery(' ' + state.text + ''); @@ -131,10 +135,20 @@ export default class KimaiFormSelect extends KimaiPlugin { templateResult: templateResultFunc }}; - jQuery(node).select2(colorOptions); + element.select2(colorOptions); } else { - jQuery(node).select2(options); + element.select2(options); } + + // this is a bugfix for safari, which does render the dropdown only with correct width upon the second opening + // see https://github.com/select2/select2/issues/4678 + element.on('select2:open', function (ev) { + if (element.data('performing-reopen') === undefined || element.data('performing-reopen') === null) { + element.data('performing-reopen', true); + element.select2('close'); + element.select2('open'); + } + }); } activateSelectPicker(selector, container) { diff --git a/assets/sass/forms.scss b/assets/sass/forms.scss index 8fdf8756..f4281cd4 100644 --- a/assets/sass/forms.scss +++ b/assets/sass/forms.scss @@ -52,4 +52,9 @@ form.form-narrow { .checkbox-menu li.active label:hover, .checkbox-menu li.active label:focus { background-color: #b8b8ff; +} + +.duration-input { + min-width:50px; + padding: 6px; } \ No newline at end of file diff --git a/assets/sass/selectpicker.scss b/assets/sass/selectpicker.scss index eb8fdc7f..6a597963 100644 --- a/assets/sass/selectpicker.scss +++ b/assets/sass/selectpicker.scss @@ -20,4 +20,10 @@ /* empty