Grid layout not working for me

[wmodes]

Grid layout doesn't seem to be working for me, and I don't know what magic I still need to do. Here's an excerpt from my schema:

jsonEditor = new JSONEditor(document.getElementById('editor_holder'),{
    "theme": "bootstrap3",
    "iconlib": "fontawesome4",
    "required_by_default": true,

    "schema": {
      "id": "chapter",
      "type": "object",
      "title": "Chapter",
      "description": "This defines a single chapter",
      "name": "chapter",
      "format": "grid",
      "options": {
        "grid_columns": 2
      },
      "properties": {
        "pathNumber": {
          "id": "pathNumber",
          "type": "integer",
          "minimum": 0,
          "title": "Path Number",
          "description": "Unique path id number",
          "name": "path Number"
        },
        "pathName": {
          "id": "pathName",
          "type": "string",
          "minLength": 0,
          "title": "Path Name",
          "description": "Name for this path",
          "name": "path Name"
        },
        "chapterNumber": {
          "id": "chapterNumber",
          "type": "integer",
          "minimum": 0,
          "title": "Chapter Number",
          "description": "Unique chapter id number",
          "name": "chapter Number"
        },
        "chapterName": {
          "id": "chapterName",
          "type": "string",
          "minLength": 0,
          "title": "Chapter Name",
          "description": "Name for this chapter",
          "name": "chapter Name"
        },

which produces fields in standard row format.

What am I missing?

[ghartsho]

add a property called object_layout and set it to 'grid'

[jdorn]

This can be done a few different ways:

• As a global setting

JSONEditor.defaults.options.object_layout = "grid";

• As an option during instantiation (like @ghartsho has):

var editor = new JSONEditor(element, {
  schema: {...},
  object_layout: "grid"
});

• As an option for a single object within your schema:

{
  "type": "object",
  "options": {
    "layout": "grid"
  }
}

The grid_columns options is something you can apply to the child properties to control their sizing. For example, if you want each property to be 50% width, you would set grid_columns to 6 for each of them (based on a 12 column grid).

[Virus721]

Hello jdorn. First thanks for making this library, it's really helpful. I'm having an issue : i can't the grid layout to work. I have tried all of the 3 possibilities you listed above, and they seem to have no effect. Are you sure it works ? Is it using some kind of CSS like grids ?) that my browser can't handle ? I also tried to set the number of columns just in case, but no effect either. Could you help ? Thank you ! :)

[jamesboone]

I too am having an issue on this. Have even tried changing the default in jsoneditor.js and it doesn't change to grid.

[Virus721]

@jamesboone I found a workaround to this issue :

"...": { "title" : "...", "type" : "array", "format" : "table", "items" : { ... } }

You have to place "format" : "table" on every array that you want to display objects as a grid.

[jamesboone]

Thanks @Virus721

[privanick]

I am having exactly the same problems that grid layout for objects (as opposed to arrays which does work) doesnt work with bare bones html style.

[privanick]

I can confirm (more or less) that Object grid layout only works when you have a CSS based style framework. I had to add bootstrap 3 before it would work

[privanick]

HI Ron, What I have gleaned from the forum is that its not “format”:”grid” that is needed as suggested in the basic documentation, but “options": {"layout": "grid"} which can be set for an object.

Array grid format seems to work fine.

I have actually moved to foundation3 instead of Bootstrap3 and edited the CCS file to remove all the extra padding and margins to make a more compact layout.

My only problem now is that when using “input_width” it is 100% compatible wioth either of the style libraries because the style layoutnis still calculated on what the rendering would have been before a smaller input width is used. So the input fields are smaller but they don’t close up, so the total width is the same.

This works for me

Nick

{ "type": "object",

"title": "CIM", "properties": { "name": {"type":"string" }, "des" : {"type":"string" }, "PARAMETERS": { "type":"object", "format":"grid", "options": {"layout": "grid"}, "properties": { "Configitem1":{"type":"object","options": {"layout": "grid","grid_columns": "12"},"id":"obj1","properties": { "Description":{"type":"string"}, "Value":{"type":"number", "template": "{{val}}","watch":{"val":"obj1.Set"}}, "Set":{"type":"integer","format": "range","default":"25","maximum":"50","minimum":"0"} }} , "Configitem2":{"type":"object","options": {"layout": "grid","grid_columns": "12"},"id":"obj2","properties": { "Description":{"type":"string"}, "Value":{"type":"number", "template": "{{val}}","watch":{"val":"obj2.Set"}}, "Set":{"type":"integer","format": "range","default":"25","maximum":"50","minimum":"0"} }} , "Configitem3":{"type":"object","options": {"layout": "grid","grid_columns": "12"},"id":"obj3","properties": { "Description":{"type":"string"}, "Value":{"type":"number", "template": "{{val}}","watch":{"val":"obj3.Set"}}, "Set":{"type":"integer","format": "range","default":"25","maximum":"50","minimum":"0"} }} } }, "nodelist": { "type":"array", "format": "table", "items":{ "type":"object", "properties": { "name":{"type":"string","default": "node"}, "ntype":{"type":"string","default": "ip"} } } }, "iomap": { "type":"array", "format":"table", "items":{ "type":"object", "properties": { "ip":{"type":"integer"}, "op":{"type":"integer"} } } } } } Nick Ray Nick Ray HW Innovator

Imagination comes before observation and empirical measurement.

"You cannot do today's job with yesterday's methods and be in business tomorrow" ~ W. Edward Deming. linked in profile: http://nl.linkedin.com/in/tangray

[cid:image002.jpg@01CBE586.F0408650]Priva Zijlweg 3 Postbus 18 2678 ZG De Lier T +31 (0)174 533 534 F +31 (0)174 522 700 M 0653501777 www.priva.nlhttp://www.priva.nl/ mailto:nick.ray@priva.nl

From: Ron Schultz [mailto:notifications@github.com] Sent: dinsdag 5 april 2016 16:05 To: jdorn/json-editor json-editor@noreply.github.com Cc: Nick Ray Nick.Ray@priva.nl Subject: Re: [jdorn/json-editor] Grid layout not working for me (#358)

I too am having issues with the grid layout. If I take the following schema, drop it into the demo application on the Github website, set object layout to grid and CSS to bootstrap 3 in the demo application, it renders but without any grid layout. Not sure what I am missing here.

{ "type": "object", "id": "expressionEditor", "title": "Time Expression Editor", "format": "grid", "properties": { "minute": { "title": "Select Minute", "type": "object", "properties": { "minuteInHour": { "title": "On the Minute in Hour", "type": "string", "options": { "grid_columns": "2" } }, "everyXxMinutes": { "title": "Every 1-60 Minutes", "type": "string", "options": { "grid_columns": "2" } }, "value": { "title": "Current Value", "type": "string", "default": "*", "options": { "grid_columns": "2" } } } } } }

— You are receiving this because you commented. Reply to this email directly or view it on GitHubhttps://github.com/jdorn/json-editor/issues/358#issuecomment-205823424

[Rcaschultz]

Nick, Thanks for the note. Finally got things working. I must have had a number of issues present but you note helped. Regards, Ron

[privanick]

My pleasure. What are you working on? I am using JSONeditor/JSON schema to make the GUI for all the configuration settings as part of an embedded system running Node JS on openWRT on an Atheros SOC .

Nick

From: Ron Schultz [mailto:notifications@github.com] Sent: Tuesday, April 05, 2016 9:44 PM To: jdorn/json-editor Cc: Nick Ray Subject: Re: [jdorn/json-editor] Grid layout not working for me (#358)

Nick, Thanks for the note. Finally got things working. I must have had a number of issues present but you note helped. Regards, Ron

— You are receiving this because you commented. Reply to this email directly or view it on GitHubhttps://github.com/jdorn/json-editor/issues/358#issuecomment-205963351