From fe14ab5b79feae0c00abd232e36f7a3bdf43de90 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Wed, 11 Sep 2019 16:14:24 +0200
Subject: [PATCH] Render color picker on top when there is not enough space
 below (see #723)

---
 HISTORY.md         |  2 +-
 src/js/treemode.js | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index f38859b..51cb805 100644
--- a/HISTORY.md
+++ b/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
diff --git a/src/js/treemode.js b/src/js/treemode.js
index fdc4866..e838703 100644
--- a/src/js/treemode.js
+++ b/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)