diff --git a/js/extkeywidget.js b/js/extkeywidget.js index d27f9ee6de..69b4677bfb 100644 --- a/js/extkeywidget.js +++ b/js/extkeywidget.js @@ -314,12 +314,13 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper }; /** - * 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} - */ + * 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 + * @param {object|undefined} oDropdownContentElem + * @return {void} + */ this.UpdateDropdownPosition = function (oControlElem, oDropdownElem, oDropdownContentElem) { // First fix width to ensure it's not too long const fControlWidth = oControlElem.outerWidth(); @@ -328,6 +329,13 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper // Then, fix height / position to ensure it's within the viewport const fWindowHeight = window.innerHeight; + // Clear previously set rule so the comparison is done with dropdown real height + oDropdownElem.css('max-height', ''); + + if(oDropdownContentElem) { + oDropdownContentElem.css('max-height', ''); + } + const fControlTopY = oControlElem.offset().top; const fControlHeight = oControlElem.outerHeight(); @@ -338,7 +346,9 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper 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'); + oDropdownElem.css({ + maxHeight: '30vh', + }); fDropdownHeight = oDropdownElem.outerHeight(); // N°9468 Dropdown content needs to be a few pixel shorter than the dropdown itself to avoid double scrollbar @@ -346,11 +356,28 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper oDropdownContentElem.css('max-height', 'calc(30vh - 4px)'); } - // Position dropdown above input if not enough space on the bottom part of the screen + /* Position dropdown above input if not enough space on the bottom part of the screen + Doesn't seem to work with selectize as an internal plugin "auto_position" refreshes the top position after + this method is called, input set use a custom plugin to avoid fix this issue "plugin_combodo_auto_position" + This would need to take the potential 4px difference into account if this is fixed. + */ if ((fDropdownTopY / fWindowHeight) > 0.6) { - oDropdownElem.css('top', fDropdownTopY - fDropdownHeight - fControlHeight); - } + oDropdownElem.css({ + top: fDropdownTopY - fDropdownHeight - fControlHeight, + borderTop: oDropdownElem.css('border-bottom') + }); + } + else { + oDropdownElem.css({ + borderTop: 'none' + }) + } } + else { + oDropdownElem.css({ + borderTop: 'none' + }) + } }; this.ManageScroll = function () { if ($('#label_'+me.id).scrollParent()[0].tagName != 'HTML') { diff --git a/js/selectize/plugin_combodo_auto_position.js b/js/selectize/plugin_combodo_auto_position.js index 8c877c6861..129a3a4372 100644 --- a/js/selectize/plugin_combodo_auto_position.js +++ b/js/selectize/plugin_combodo_auto_position.js @@ -33,15 +33,31 @@ Selectize.define("combodo_auto_position", function (aOptions) { // Override position dropdown function oSelf.positionDropdown = (function () { return function () { - let iRefHeight = oSelf.$dropdown.outerHeight(); - if(oSelf.$control.offset().top + oSelf.$control.outerHeight() + iRefHeight > window.innerHeight){ + // Clear previously set rules so the comparison is done with dropdown real height + oSelf.$dropdown.css({ + 'max-height': '', + }); - oSelf.$dropdown.css({ - top: oSelf.$control.offset().top - iRefHeight, - left: oSelf.$control.offset().left, + oSelf.$dropdown_content.css({ + 'max-height': '', + }); + + let iDropdownHeight = oSelf.$dropdown.outerHeight(); + if(oSelf.$control.offset().top + oSelf.$control.outerHeight() + iDropdownHeight > window.innerHeight){ + + // Apply max-height as we are overflowing, that'll allow us to calculate where we should place ourselves later + oSelf.$dropdown.css({ + maxHeight: `${aOptions.maxDropDownHeight}`, + }) + + iDropdownHeight = oSelf.$dropdown.outerHeight(); + + oSelf.$dropdown.css({ + top: oSelf.$control.offset().top - iDropdownHeight + 4, // Content will be shorter, so our real height too + left: oSelf.$control.offset().left, width: oSelf.$wrapper.outerWidth(), - 'max-height': `${aOptions.maxDropDownHeight}`, - 'overflow-y': 'auto', + overflowY: 'auto', + borderTop : oSelf.$dropdown.css('border-bottom') }); // N°9468 Dropdown content needs to be a few pixel shorter than the dropdown itself to avoid double scrollbar @@ -55,8 +71,9 @@ Selectize.define("combodo_auto_position", function (aOptions) { top: oSelf.$control.offset().top + oSelf.$control.outerHeight(), left: oSelf.$control.offset().left, width: oSelf.$wrapper.outerWidth(), - 'overflow-y': 'auto' - }); + overflowY: 'auto', + borderTop: 'none' + }); } }; }());