N°9177 - Blockquote in HTML field are unreadable in darkmoon

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

@@ -201,9 +201,8 @@ $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: calc(#{$ibo-input-select-selectize--dropdown--max-height} - 4px);
+  max-height: $ibo-input-select-selectize--dropdown--max-height;
 }
 
 .selectize-dropdown.ui-menu .ui-state-active {

css/backoffice/vendors/_bulma-variables-overload.scss

@@ -21,6 +21,7 @@ $text-strong: inherit !default;
  * See https://bulma.io/documentation/elements/content/
  */
 $content-block-margin-bottom: 0 !default;
+$content-blockquote-background-color: $ibo-color-grey-200 !default;
 
 /* Table: Reset style as much as possible to match rich text editor preview, which is the browser's default stylesheet.
  * As there is no way to avoid bulma rules, we simply make them invalid by setting an invalid variable value, the rules will then be ignored by the browser.

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

@@ -53,6 +53,7 @@ $text-strong: inherit !default;
 $code: $ibo-color-primary-400 !default;
 $code-background: $ibo-color-grey-700 !default;
 $pre-background: $ibo-color-grey-600 !default;
+$content-blockquote-background-color: $ibo-color-grey-600 !default;
 
 $ibo-scrollbar--scrollbar-track-background-color: $ibo-color-grey-700 !default;
 $ibo-scrollbar--scrollbar-thumb-background-color: $ibo-color-grey-900 !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, this.$dropdown_content);
+				me.UpdateDropdownPosition(this.$control, oDropdownElem);
 			},
 		});
 		let $selectize = $select[0].selectize; // This stores the selectize object to a variable (with name 'selectize')
@@ -314,14 +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
-     * @param {object|undefined} oDropdownContentElem
-     * @return {void}
-     */
-	this.UpdateDropdownPosition = function (oControlElem, oDropdownElem, oDropdownContentElem) {
+	 * 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}
+	 */
+	this.UpdateDropdownPosition = function (oControlElem, oDropdownElem) {
 		// First fix width to ensure it's not too long
 		const fControlWidth = oControlElem.outerWidth();
 		oDropdownElem.css('width', fControlWidth);
@@ -329,13 +328,6 @@ 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();
 
@@ -346,38 +338,14 @@ 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({
-                maxHeight: '30vh',
-            });
+			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
-               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.
-			 */
+			// 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,
-                    borderTop: oDropdownElem.css('border-bottom')
-                });
-            }
-            else {
-                oDropdownElem.css({
-                    borderTop: 'none'
-                })
-            }
+				oDropdownElem.css('top', fDropdownTopY - fDropdownHeight - fControlHeight);
+			}
 		}
-        else {
-            oDropdownElem.css({
-                borderTop: 'none'
-            })
-        }
 	};
 	this.ManageScroll = function () {
 		if ($('#label_'+me.id).scrollParent()[0].tagName != 'HTML') {

js/selectize/plugin_combodo_auto_position.js

@@ -22,7 +22,7 @@ Selectize.define("combodo_auto_position", function (aOptions) {
 
 	// Plugin options
 	aOptions = $.extend({
-			maxDropDownHeight: '200px',
+			maxDropDownHeight: 200,
 		},
 		aOptions
 	);
@@ -33,47 +33,28 @@ Selectize.define("combodo_auto_position", function (aOptions) {
 	// Override position dropdown function
 	oSelf.positionDropdown = (function () {
 		return function () {
-            // Clear previously set rules so the comparison is done with dropdown real height
-            oSelf.$dropdown.css({
-                'max-height': '',
-            });
+			let iRefHeight = oSelf.$dropdown.outerHeight() < aOptions.maxDropDownHeight ?
+				oSelf.$dropdown.outerHeight() : aOptions.maxDropDownHeight;
 
-            oSelf.$dropdown_content.css({
-                'max-height': '',
-            });
+			if(oSelf.$control.offset().top + oSelf.$control.outerHeight() + iRefHeight > window.innerHeight){
 
-            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,
+				oSelf.$dropdown.css({
+					top: oSelf.$control.offset().top - iRefHeight,
+					left: oSelf.$control.offset().left,
 					width: oSelf.$wrapper.outerWidth(),
-					overflowY: 'auto',
-                    borderTop : oSelf.$dropdown.css('border-bottom')
+					'max-height': `${aOptions.maxDropDownHeight}px`,
+					'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(),
-					overflowY: 'auto',
-                    borderTop: 'none'
-            });
+					'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: '30vh', {# same value as external key widget #}
+            maxDropDownHeight: 300, {# in px #}
         },
         {# PLUGIN combodo add button #}
         {% if oUIBlock.HasAddOptionButton() %}