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