search

jdorn / json-editor

JSON Schema Based Editor
MIT License
5.81k stars 1.08k forks source link

JsonSchema for Grid layout doesn't seem to be working #768

Open ror0101dev opened 7 years ago

ror0101dev commented 7 years ago

Hi, I have configured json-schema to build a bootstrap3 form and I took reference from http://jeremydorn.com/json-editor/ for bootstrap grid system layout but somehow bootstrap classes was not applying. I am using jsoneditor to render on view with bootstrap grid where I can show multiple input fields in a row so can you please help here to me.

Below is the schema, I am testing on -

{ "title": "Person", "type": "object", "properties": { "name": { "type": "string", "description": "First and Last name", "minLength": 4, "default": "Jeremy Dorn" }, "age": { "type": "integer", "default": 25, "minimum": 18, "maximum": 99 }, "favorite_color": { "type": "string", "format": "color", "title": "favorite color", "default": "#ffa500" }, "gender": { "type": "string", "enum": [ "male", "female" ] }, "location": { "type": "object", "title": "Location", "properties": { "city": { "type": "string", "default": "San Francisco" }, "state": { "type": "string", "default": "CA" }, "citystate": { "type": "string", "description": "This is generated automatically from the previous two fields", "template": "{{city}}, {{state}}", "watch": { "city": "location.city", "state": "location.state" } } } }, "pets": { "type": "array", "format": "table", "title": "Pets", "uniqueItems": true, "items": { "type": "object", "title": "Pet", "properties": { "type": { "type": "string", "enum": [ "cat", "dog", "bird", "reptile", "other" ], "default": "dog" }, "name": { "type": "string" } } }, "default": [ { "type": "dog", "name": "Walter" } ] } } }

Below is the form coffee code where I am using above json - :coffeescript $('#editor').jsoneditor schema: JSON.parse(above_json) theme: 'bootstrap3' disable_collapse: true, disable_edit_json: true, disable_properties: true

avinash2k commented 7 years ago

Not working ... Trying thefollowing code with bootstrap3 included. JSONEditor.defaults.options.theme = 'bootstrap3'; JSONEditor.defaults.options.iconlib = "fontawesome4"; JSONEditor.defaults.options.object_layout = "grid"; JSONEditor.defaults.editors.object.options.grid_columns = 4;