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

css/backoffice/components/input/_input-select.scss

@@ -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 {

datamodels/2.x/combodo-backoffice-darkmoon-theme/scss/scss-variables.scss

@@ -175,6 +175,7 @@ $ibo-input-select--action-button--color: $ibo-input-select-wrapper--after--color
 $ibo-input-select-selectize--item--active--text-color: $ibo-color-grey-100 !default;
 $ibo-input-select-selectize--item--active--background-color: $ibo-color-grey-500 !default;
 $ibo-input-select--autocomplete-item-image--background-color: $ibo-color-grey-800 !default;
+$ibo-input-date--button--color: $ibo-input-select--action-button--color;
 $ibo-vendors-selectize-input--color: $ibo-body-text-color !default;
 $ibo-vendors-selectize-input--background-color: $ibo-input--background-color !default;
 $ibo-vendors-selectize--input--border-color: $ibo-input--border-color !default;
@@ -222,6 +223,11 @@ $ibo-vendors-datatables--row-highlight--colors:('red': ($ibo-color-red-700),'dan
 
 $ibo-vendors-jqueryui--ui-dialog--background-color: $ibo-color-grey-800 !default;
 $ibo-vendors-jqueryui--ui-dialog-titlebar--border-bottom: solid 1px $ibo-color-grey-500 !default;
+$ibo-vendors-jqueryui--ui-datepicker--background-color: $ibo-color-grey-700 !default;
+$ibo-vendors-jqueryui--ui-datepicker-days--color: $ibo-color-primary-200 !default;
+$ibo-vendors-jqueryui--ui-datepicker-days--highlight--background-color: $ibo-color-primary-800 !default;
+$ibo-vendors-jqueryui--ui-datepicker-days--hover--background-color: $ibo-color-primary-500 !default;
+$ibo-vendors-jqueryui--ui-datepicker-days--active--background-color: $ibo-color-primary-700 !default;
 
 
 

js/extkeywidget.js

@@ -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);

js/selectize/plugin_combodo_auto_position.js

@@ -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'
 				});
 			}

templates/base/components/input/set/layout.ready.js.twig

@@ -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() %}