diff --git a/src/js/treemode.js b/src/js/treemode.js
index a474009..9b6d975 100644
--- a/src/js/treemode.js
+++ b/src/js/treemode.js
@@ -129,6 +129,8 @@ treemode.destroy = function () {
  * @private
  */
 treemode._setOptions = function (options) {
+  var editor = this;
+
   this.options = {
     search: true,
     history: true,
@@ -142,10 +144,15 @@ treemode._setOptions = function (options) {
     colorPicker: true,
     onColorPicker: function (parent, color, onChange) {
       if (VanillaPicker) {
+        var contentRect = editor.content.getBoundingClientRect();
+        var parentRect = parent.getBoundingClientRect();
+        var pickerWidth = 250;
+        var pickerRight = parentRect.right + pickerWidth;
+
         new VanillaPicker({
           parent: parent,
           color: color,
-          popup: 'bottom',
+          popup: (pickerRight < contentRect.right) ? 'bottom' : 'left',
           onDone: function (color) {
             var alpha = color.rgba[3]
             var hex = (alpha === 1)