Fixed josdejong#289: Some CSS breaking when using the editor in combi…

…nation with materialize.css or bootstrap
bachors · Apr 9, 2016 · ea473c5 · ea473c5
1 parent 96304f8
commit ea473c5
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 5 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -6,6 +6,8 @@ https://github.com/josdejong/jsoneditor
 ## not yet released, version 5.4.0
 
 - Upgraded all dependencies.
+- Fixed #289: Some CSS breaking when using the editor in combination with
+  materialize.css or bootstrap.
 - Fixed #290: `setText()` not working in mode text or code.
 
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -125,6 +125,7 @@ gulp.task('bundle-minimalist', ['mkdir'], function (done) {
 // bundle css
 gulp.task('bundle-css', ['mkdir'], function () {
   gulp.src([
+    'src/css/reset.css',
     'src/css/jsoneditor.css',
     'src/css/contextmenu.css',
     'src/css/menu.css',

diff --git a/src/css/contextmenu.css b/src/css/contextmenu.css
@@ -9,6 +9,7 @@ div.jsoneditor-contextmenu-root {
 
 div.jsoneditor-contextmenu {
   position: absolute;
+  box-sizing: content-box;
   z-index: 99999;
 }
 

diff --git a/src/css/reset.css b/src/css/reset.css
@@ -0,0 +1,25 @@
+/* reset styling (prevent conflicts with bootstrap, materialize.css, etc.) */
+
+div.jsoneditor input {
+  height: auto;
+  border: inherit;
+}
+
+div.jsoneditor input:focus {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+div.jsoneditor table {
+  border-collapse: collapse;
+  width: auto;
+}
+
+div.jsoneditor td,
+div.jsoneditor th {
+  padding: 0;
+  display: table-cell;
+  text-align: left;
+  vertical-align: inherit;
+  border-radius: inherit;
+}
diff --git a/test/test_bootstrap.html b/test/test_bootstrap.html
@@ -15,11 +15,6 @@
       height: 500px;
     }
 
-    ul.jsoneditor-menu { /* bootstrap fix */
-      -webkit-box-sizing: content-box;
-      -moz-box-sizing: content-box;
-      box-sizing: content-box;
-    }
   </style>
 </head>
 <body>

diff --git a/test/test_materialize.html b/test/test_materialize.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+
+  <!-- materialize css -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
+
+  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
+  <script src="../dist/jsoneditor.js"></script>
+
+  <style>
+    body {
+      font: 10.5pt arial;
+      color: #4d4d4d;
+      line-height: 150%;
+      width: 500px;
+      padding-left: 40px;
+    }
+
+    code {
+      background-color: #f5f5f5;
+    }
+
+    #jsoneditor {
+      width: 500px;
+      height: 500px;
+    }
+  </style>
+</head>
+<body>
+
+<p>
+  Switch editor mode using the mode box.
+  Note that the mode can be changed programmatically as well using the method
+  <code>editor.setMode(mode)</code>, try it in the console of your browser.
+</p>
+
+<form>
+  <div id="jsoneditor"></div>
+</form>
+
+<script>
+  var container, options, json, editor;
+
+  container = document.getElementById('jsoneditor');
+
+  options = {
+    mode: 'tree',
+    modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
+    onError: function (err) {
+      alert(err.toString());
+    },
+    onChange: function () {
+      console.log('change');
+    },
+    indentation: 4,
+    escapeUnicode: true
+  };
+
+  json = {
+    "array": [1, 2, [3,4,5]],
+    "boolean": true,
+    "htmlcode": '&quot;',
+    "escaped_unicode": '\\u20b9',
+    "unicode": '\u20b9,\uD83D\uDCA9',
+    "return": '\n',
+    "null": null,
+    "number": 123,
+    "object": {"a": "b", "c": "d"},
+    "string": "Hello World",
+    "url": "http://jsoneditoronline.org"
+  };
+
+  editor = new JSONEditor(container, options, json);
+
+  console.log('json', json);
+  console.log('string', JSON.stringify(json));
+</script>
+</body>
+</html>