diff --git a/HISTORY.md b/HISTORY.md index f189720..f812489 100644 --- 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 index 3e3db46..e78d4e2 100644 --- 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 index b09a4ce..8220433 100644 --- 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 new file mode 100644 index 0000000..13f7334 --- /dev/null +++ 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 index 1436d5d..50baaff 100644 --- 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; - } diff --git a/test/test_materialize.html b/test/test_materialize.html new file mode 100644 index 0000000..5000707 --- /dev/null +++ b/test/test_materialize.html @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + +

+ Switch editor mode using the mode box. + Note that the mode can be changed programmatically as well using the method + editor.setMode(mode), try it in the console of your browser. +

+ +
+
+
+ + + +