Fixed #557: inner contents of the scrollable area being displayed outside of the editor (on Chrome only)

HISTORY.md

@@ -3,6 +3,12 @@
 https://github.com/josdejong/jsoneditor
 
 
+## 2018-07-28, version 5.19.1
+
+- Fixed #557: inner contents of the scrollable area being displayed outside of
+  the editor (on Chrome only).
+
+
 ## 2018-07-11, version 5.19.0
 
 - No more grayed out icons of the context menu, see #532.

src/css/jsoneditor.css

@@ -218,7 +218,10 @@ div.jsoneditor-tree table.jsoneditor-tree {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
-  margin: 0 0 300px; /* keep space for the action menu dropdown */
+}
+
+div.jsoneditor-tree div.jsoneditor-tree-inner {
+  padding-bottom: 300px;
 }
 
 div.jsoneditor-outer {

src/js/treemode.js

@@ -1331,9 +1331,18 @@ treemode._createTable = function () {
   }
   this.contentOuter = contentOuter;
 
+  this.scrollableContent = document.createElement('div');
+  this.scrollableContent.className = 'jsoneditor-tree';
+  contentOuter.appendChild(this.scrollableContent);
+
+  // the jsoneditor-tree-inner div with bottom padding is here to
+  // keep space for the action menu dropdown. It's created as a
+  // separate div instead of using scrollableContent to work around
+  // and issue in the Chrome browser showing scrollable contents outside of the div
+  // see https://github.com/josdejong/jsoneditor/issues/557
   this.content = document.createElement('div');
-  this.content.className = 'jsoneditor-tree';
+  this.content.className = 'jsoneditor-tree-inner';
-  contentOuter.appendChild(this.content);
+  this.scrollableContent.appendChild(this.content);
 
   this.table = document.createElement('table');
   this.table.className = 'jsoneditor-tree';