composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-17 06:18:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°9468 - Fix double scroll down bars in input set

Browse Source
This commit is contained in:
Stephen Abello
2026-04-09 10:49:37 +02:00
parent 6bd34dc73e
commit 7071b3301c
4 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/backoffice/components/input/_input-select.scss
View File

@@ -201,8 +201,9 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
}
// N°7982 Default selectize stylesheet override
// N°9468 Dropdown content needs to be a few pixel shorter than the dropdown itself to avoid double scrollbar
.selectize-dropdown-content{
max-height: $ibo-input-select-selectize--dropdown--max-height;
max-height: calc(#{$ibo-input-select-selectize--dropdown--max-height} - 4px);
}
.selectize-dropdown.ui-menu .ui-state-active {

9
js/extkeywidget.js
View File

@@ -171,7 +171,7 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
// To avoid dropdown to be cut by the container's overflow hidden rule
dropdownParent: 'body',
onDropdownOpen: function (oDropdownElem) {
me.UpdateDropdownPosition(this.$control, oDropdownElem);
me.UpdateDropdownPosition(this.$control, oDropdownElem, this.$dropdown_content);
},
});
let $selectize = $select[0].selectize; // This stores the selectize object to a variable (with name 'selectize')
@@ -320,7 +320,7 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
* @param {object} oDropdownElem jQuery object representing the results dropdown
* @return {void}
*/
this.UpdateDropdownPosition = function (oControlElem, oDropdownElem) {
this.UpdateDropdownPosition = function (oControlElem, oDropdownElem, oDropdownContentElem) {
// First fix width to ensure it's not too long
const fControlWidth = oControlElem.outerWidth();
oDropdownElem.css('width', fControlWidth);
@@ -341,6 +341,11 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
oDropdownElem.css('max-height', '30vh');
fDropdownHeight = oDropdownElem.outerHeight();
// N°9468 Dropdown content needs to be a few pixel shorter than the dropdown itself to avoid double scrollbar
if(oDropdownContentElem) {
oDropdownContentElem.css('max-height', 'calc(30vh - 4px)');
}
// 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);

16
js/selectize/plugin_combodo_auto_position.js
View File

@@ -22,7 +22,7 @@ Selectize.define("combodo_auto_position", function (aOptions) {
// Plugin options
aOptions = $.extend({
maxDropDownHeight: 200,
maxDropDownHeight: '200px',
},
aOptions
);
@@ -33,26 +33,28 @@ Selectize.define("combodo_auto_position", function (aOptions) {
// Override position dropdown function
oSelf.positionDropdown = (function () {
return function () {
let iRefHeight = oSelf.$dropdown.outerHeight() < aOptions.maxDropDownHeight ?
oSelf.$dropdown.outerHeight() : aOptions.maxDropDownHeight;
let iRefHeight = oSelf.$dropdown.outerHeight();
if(oSelf.$control.offset().top + oSelf.$control.outerHeight() + iRefHeight > window.innerHeight){
oSelf.$dropdown.css({
top: oSelf.$control.offset().top - iRefHeight,
left: oSelf.$control.offset().left,
width: oSelf.$wrapper.outerWidth(),
'max-height': `${aOptions.maxDropDownHeight}px`,
'max-height': `${aOptions.maxDropDownHeight}`,
'overflow-y': 'auto',
'border-top': '1px solid #d0d0d0',
});
// N°9468 Dropdown content needs to be a few pixel shorter than the dropdown itself to avoid double scrollbar
oSelf.$dropdown_content.css({
'max-height': `calc(${aOptions.maxDropDownHeight} - 4px)`
});
}
else{
oSelf.$dropdown.css({
top: oSelf.$control.offset().top + oSelf.$control.outerHeight(),
left: oSelf.$control.offset().left,
width: oSelf.$wrapper.outerWidth(),
'max-height': `${aOptions.maxDropDownHeight}px`,
'overflow-y': 'auto'
});
}

2
templates/base/components/input/set/layout.ready.js.twig
View File

@@ -23,7 +23,7 @@ let oWidget{{ oUIBlock.GetId() }} = $('#{{ oUIBlock.GetId() }}').selectize({
},
{# PLUGIN combodo auto position #}
'combodo_auto_position' : {
maxDropDownHeight: 300, {# in px #}
maxDropDownHeight: '30vh', {# same value as external key widget #}
},
{# PLUGIN combodo add button #}
{% if oUIBlock.HasAddOptionButton() %}