Render color picker on top when there is not enough space below (see j…

…osdejong#723)

HISTORY.md

@@ -5,7 +5,7 @@ https://github.com/josdejong/jsoneditor
 
 ## not yet published, version 7.0.4
 
-- Fixed #723: schema error popup not always fully visible.
+- Fixed #723: schema error popup and color picker not always fully visible.
 - Fixed wrong text color in search box when using JSONEditor in combination
   with bootstrap. See #791. Thanks @dmitry-kulikov.
 - Fixed react examples not working out of the box when cloning or downloading

src/js/treemode.js

@@ -124,10 +124,18 @@ treemode._setOptions = function (options) {
     colorPicker: true,
     onColorPicker: function (parent, color, onChange) {
       if (VanillaPicker) {
+        // we'll render the color picker on top
+        // when there is not enough space below, and there is enough space above
+        const pickerHeight = 300; // estimated height of the color picker
+        const top = parent.getBoundingClientRect().top
+        const windowHeight = window.innerHeight
+
         new VanillaPicker({
           parent: parent,
           color: color,
-          popup: 'bottom',
+          popup: ((windowHeight - top) < pickerHeight && top > pickerHeight)
+            ? 'top'
+            : 'bottom',
           onDone: function (color) {
             const alpha = color.rgba[3]
             const hex = (alpha === 1)