From e25d070a38a93f85016ce9428cd3c0ec53d0439c Mon Sep 17 00:00:00 2001 From: Stephen Abello Date: Tue, 23 Nov 2021 13:33:08 +0100 Subject: [PATCH] =?UTF-8?q?N=C2=B04465=20Fix=20tagset=20and=20enumset=20dr?= =?UTF-8?q?opdown=20overflowing=20out=20of=20the=20screen=20and=20not=20au?= =?UTF-8?q?toplacing=20themselves?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/input/_input-select.scss | 1 + js/jquery.itop-set-widget.js | 35 ++++++++++++++++++- 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/css/backoffice/components/input/_input-select.scss b/css/backoffice/components/input/_input-select.scss index 10e9ac81e..6d28f2fad 100644 --- a/css/backoffice/components/input/_input-select.scss +++ b/css/backoffice/components/input/_input-select.scss @@ -182,6 +182,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60 /*2 types of selectize to manage (select + autocomplete)*/ .selectize-dropdown.ui-autocomplete, +.selectize-dropdown.set-dropdown, .selectize-dropdown.plugin-custom_itop { z-index: 2000; /* Note: This is not great as it does not take into account other elements z-index, but as selectize puts its dropdown under the tag, we cannot have a z-index relative to input container. */ max-height: $ibo-input-select-selectize--dropdown--max-height; diff --git a/js/jquery.itop-set-widget.js b/js/jquery.itop-set-widget.js index 686c3935a..4320b126b 100644 --- a/js/jquery.itop-set-widget.js +++ b/js/jquery.itop-set-widget.js @@ -164,7 +164,11 @@ $.widget('itop.set_widget', onItemRemove: function (value) { var selectizeWidget = this; setWidget._onTagRemove(value, selectizeWidget); - } + }, + onDropdownOpen: function (oDropdownElem) { + oDropdownElem.addClass('set-dropdown'); + setWidget._updateDropdownPosition(this.$control, oDropdownElem); + }, }); this.selectizeWidget = $inputWidget[0].selectize; // keeping this for set widget public methods @@ -348,5 +352,34 @@ $.widget('itop.set_widget', _isCodeInPartialValues: function (setItemCode) { return (this.partialValues.indexOf(setItemCode) >= 0); + }, + /** + * Update the dropdown's position so it always fits in the screen + * + * @param {object} oControlElem jQuery object representing the "control" input (= where the user types) of the external key + * @param {object} oDropdownElem jQuery object representing the results dropdown + * @return {void} + */ + _updateDropdownPosition: function (oControlElem, oDropdownElem) { + const fWindowHeight = window.innerHeight; + + const fControlTopY = oControlElem.offset().top; + const fControlHeight = oControlElem.outerHeight(); + + const fDropdownTopY = oDropdownElem.offset().top; + // This one is "let" as it might be updated if necessary + let fDropdownHeight = oDropdownElem.outerHeight(); + const fDropdownBottomY = fDropdownTopY + fDropdownHeight; + + if (fDropdownBottomY > fWindowHeight) { + // Set dropdown max-height to 1/3 of the screen, this way we are sure the dropdown will fit in either the top / bottom half of the screen + oDropdownElem.css('max-height', '30vh'); + fDropdownHeight = oDropdownElem.outerHeight(); + + // Position dropdown above input if not enough space on the bottom part of the screen + if ((fDropdownTopY / fWindowHeight) > 0.6) { + oDropdownElem.css('top', fDropdownTopY - fDropdownHeight - fControlHeight); + } + } } }); \ No newline at end of file