> > >> I'll consider this topic closed. > > > Not so fast. :D >
Cool. I had been digging around the original Json Editor stand-alone code, maybe I can point to something useful. Warning: Code Blocks coming up. :D > > The "grid" feature requires a separate CSS module to work (bootstrap or >> foundation). >> > > What happens without such a "module"? > > ...and then what is that "module" to provide so that you can use either > this or that "framework", e.g. bootstrap or some other? > When I tried @btheado's method (below), I also got overlapping elements (& I think he's right about conflicting CSS definitions...). See attached jpeg for a screenshot. > > 1. Open > http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css in > your browser and select all and copy to clipboard > 2. Open https://btheado.github.io/jsoneditor.html in your browser > 3. Create new tiddler titled "bootstrap" or whatever. > 4. Paste clipboard contents into the body of the tiddler > 5. Add the $:/tags/Stylesheet tag to the tiddler > 6. Save the tiddler > > The stylesheet should now be applied and the json form becames misaligned > and unreadable :-(. Not sure if it is due to *some conflict the the > tiddlywiki styles* or if it is some other problem. > The easiest way to trigger this layout option is to include "format": "grid" in the object's schema. So, I dug into @jdorn <https://github.com/jdorn>/json-editor <https://github.com/jdorn/json-editor>'s source looking for references to the "grid" option. There is one reference in the "object.js" sub-file of the "jsoneditor.js" (distribution package) in the "layoutEditors: function()": if (this.format === 'grid'){ do stuff to make grid } // Normal layout else { do other stuff to make normal layout} Withing the If statement, there is are this.theme.getGridRow() calls (which I think is where the bootstrap or foundation *.js files are referenced): // Layout the form for Grid format container = document.createElement('div'); for(i=0; i<rows.length; i++) { var row = this.theme.getGridRow(); container.appendChild(row); for(j=0; j<rows[i].editors.length; j++) { var key = rows[i].editors[j].key; var editor = this.editors[key]; if(editor.options.hidden) editor.container.style.display = 'none'; else this.theme.setGridColumnSize(editor.container,rows[i].editors[j].width); row.appendChild(editor.container); } } While the else{} block had this: ontainer = document.createElement('div'); $each(this.property_order, function(i,key) { var editor = self.editors[key]; if(editor.property_removed) return; var row = self.theme.getGridRow(); container.appendChild(row); if(editor.options.hidden) editor.container.style.display = 'none'; else self.theme.setGridColumnSize(editor.container,12); row.appendChild(editor.container); }); Looking in the included theme.js sub-file, we have this: getGridRow: function() { var el = document.createElement('div'); el.className = 'row'; return el; } To test the differences, I simplified the schema in @jdorn's sample (http://jeremydorn.com/json-editor/), and inspected the source code with and without the Grid option set. Without "format" : "grid" set: <div class="well well-sm" style="padding-bottom: 0px;"> <div> <div> <div class="row"> <div data-schematype="string" data-schemapath="root.name" class="col-md-12"> <div class=" form-group"> <label class=" control-label">name</label> <input type="text" class="form-control" pattern=".{4,}" name="root[name]"> <p class="help-block">First and Last name</p> </div> <div/> </div> </div> <div class="row"> <div data-schematype="integer" data-schemapath="root.age" class="col-md-12"> <div class=" form-group"> <label class=" control-label">age</label> <input type="text" class="form-control" name="root[age]"> </div> <div/> </div> </div> <div class="row"> <div data-schematype="string" data-schemapath="root.favorite_color" class="col-md-12"> <div class=" form-group"> <label class=" control-label">favorite color</label> <input type="color" class="form-control" data-schemaformat="color" name="root[favorite_color]"> </div> <div/> </div> </div> <div class="row"> <div data-schematype="string" data-schemapath="root.gender" class="col-md-12"> <div class=" form-group"> <label class=" control-label">gender</label> <select class="form-control" name="root[gender]"> <option value="undefined"> </option> <option value="male">male</option> <option value="female">female</option> </select> </div> <div/> </div> </div> </div> </div> </div> With "format" : "grid" applied: <div class="well well-sm" style="padding-bottom: 0px;"> <div> <div> <div class="row"> <div data-schematype="string" data-schemapath="root.name" class="col-md-5"> <div class=" form-group"> <label class=" control-label">name</label> <input type="text" class="form-control" pattern=".{4,}" name="root[name]"> <p class="help-block">First and Last name</p> </div> <div/> </div> <div data-schematype="integer" data-schemapath="root.age" class="col-md-2"> <div class=" form-group"> <label class=" control-label">age</label> <input type="text" class="form-control" name="root[age]"> </div> <div/> </div> <div data-schematype="string" data-schemapath="root.favorite_color" class="col-md-3"> <div class=" form-group"> <label class=" control-label">favorite color</label> <input type="color" class="form-control" data-schemaformat="color" name="root[favorite_color]"> </div> <div/> </div> <div data-schematype="string" data-schemapath="root.gender" class="col-md-2"> <div class=" form-group"> <label class=" control-label">gender</label> <select class="form-control" name="root[gender]"> <option value="undefined"> </option> <option value="male">male</option> <option value="female">female</option> </select> </div> <div/> </div> </div> </div> </div> </div> So it seems to change how these Row elements are nested, and applies a CSS class to define how many columns this element takes up (out of the 12 column max used in the layout logic). Hope that helps to understand this issue. -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e8bf275c-d8ce-43f8-9c9d-a6f8e3c77f14%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
