Fixed #289: Some CSS breaking when using the editor in combination with materialize.css or bootstrap
This commit is contained in:
jos
parent
96304f83a7
commit
ea473c54aa
|
|
@ -6,6 +6,8 @@ https://github.com/josdejong/jsoneditor
|
||||||
## not yet released, version 5.4.0
|
## not yet released, version 5.4.0
|
||||||
|
|
||||||
- Upgraded all dependencies.
|
- 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.
|
- Fixed #290: `setText()` not working in mode text or code.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -125,6 +125,7 @@ gulp.task('bundle-minimalist', ['mkdir'], function (done) {
|
||||||
// bundle css
|
// bundle css
|
||||||
gulp.task('bundle-css', ['mkdir'], function () {
|
gulp.task('bundle-css', ['mkdir'], function () {
|
||||||
gulp.src([
|
gulp.src([
|
||||||
|
'src/css/reset.css',
|
||||||
'src/css/jsoneditor.css',
|
'src/css/jsoneditor.css',
|
||||||
'src/css/contextmenu.css',
|
'src/css/contextmenu.css',
|
||||||
'src/css/menu.css',
|
'src/css/menu.css',
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ div.jsoneditor-contextmenu-root {
|
||||||
|
|
||||||
div.jsoneditor-contextmenu {
|
div.jsoneditor-contextmenu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
box-sizing: content-box;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -15,11 +15,6 @@
|
||||||
height: 500px;
|
height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.jsoneditor-menu { /* bootstrap fix */
|
|
||||||
-webkit-box-sizing: content-box;
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -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": '"',
|
||||||
|
"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>
|
||||||
Loading…
Reference in New Issue