diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index ca779d039a1..c77add0371a 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -842,19 +842,12 @@ const Wysiwyg = Widget.extend({
                         }
                         manualOpening = true;
                         $dropdown.children('.dropdown-toggle').dropdown('show');
-                        const $colorpickerMenu = $dropdown.find('.colorpicker-menu');
                         const $colorpicker = $dropdown.find('.colorpicker');
                         const colorpickerHeight = $colorpicker.outerHeight();
                         const toolbarPos = this.toolbar.$el.offset();
-                        let top;
-                        if (colorpickerHeight < toolbarPos.top) {
-                            top = 'auto';
-                        } else {
-                            const colorpickerBottom = toolbarPos.top + this.toolbar.$el.outerHeight() + colorpickerHeight;
-                            const clientHeight = this.odooEditor.document.documentElement.clientHeight;
-                            top = colorpickerBottom > clientHeight ? colorpickerHeight - clientHeight : '';
-                        }
-                        $colorpickerMenu.css({top, height: $colorpicker.outerHeight() + 2});
+                        const colorpickerBottom = toolbarPos.top + this.toolbar.$el.outerHeight() + colorpickerHeight;
+                        const clientHeight = this.odooEditor.document.documentElement.clientHeight;
+                        $dropdown[0].classList.toggle('dropup', colorpickerBottom > clientHeight);
                         manualOpening = false;
                     });
                 });
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 5c32695d93d..2d89e09cc4f 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -75,11 +75,9 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         box-shadow: $o-we-dropdown-shadow;
 
         &.colorpicker-menu {
-            bottom: 100%;
             margin-top: 0;
             margin-bottom: 0.125rem;
             min-width: 222px !important;
-            height: auto !important;
         }
     }
     .dropdown-toggle::after {