FormBuilder output styling

July 20, 2016 at 11:33 PM

I would like to have a FormBuilder output similar to the below example image (right hand side image) with check marks displayed for the selected boxes in the form. Please ignore the colors in the example image:

Alejandro was kind enough to create and provide the JSON schema form code below (as can be seen in this thread). I have slightly altered it below:

{
    "title": "times",
  "type": "table",
    "options": {
        "disable_array_add": true,
        "disable_array_delete": true,
        "disable_array_reorder": true
    },  
    "items": {
    "title": "Item",
    "type": "object",
    "properties": {
        "hours": {
          "id": "hours",
          "title": "Hours",
          "type": "string",
          "readOnly": true,
          "enum": [
            "0-1",
            "1-2",
            "2-3",
            "3-4",
            "4-5",
            "5-6",
            "6-7",
            "7-8",
            "8-9",
            "9-10",
            "10-11",
            "11-12",
            "12-13",
            "13-14",
            "14-15",
            "15-16",
            "16-17",
            "17-18",
            "18-19",
            "19-20",
            "20-21",
            "21-22",
            "22-23",
            "23-24"
          ]
        },        
        "monday": {
            "title": "M",
            "type": "boolean",
            "format": "checkbox"
        },
        "tuesday": {
            "title": "T",
            "type": "boolean",
            "format": "checkbox"
        },
        "wednesday": {
            "title": "W",
            "type": "boolean",
            "format": "checkbox"
        },
        "thursday": {
            "title": "T",
            "type": "boolean",
            "format": "checkbox"
        },
        "friday": {
            "title": "F",
            "type": "boolean",
            "format": "checkbox"
        },
        "saturday": {
            "title": "S",
            "type": "boolean",
            "format": "checkbox"
        },
        "sunday": {
            "title": "S",
            "type": "boolean",
            "format": "checkbox"
        }
    }
  },
  "default": [
        {
        "hours": "0-1"
    },
        {
        "hours": "1-2"
    },
        {
        "hours": "2-3"
    },
        {
        "hours": "3-4"
    },
        {
        "hours": "4-5"
    },
        {
        "hours": "5-6"
    },
      {
        "hours": "6-7"
    },
      {
        "hours": "7-8"
    },
    {
        "hours": "8-9"
    },
    {
        "hours": "9-10"
    },
    {
        "hours": "10-11"
    },
    {
        "hours": "11-12"
    },
    {
        "hours": "12-13"
    },    
    {
        "hours": "13-14"
    },     
    {
        "hours": "14-15"
    },
    {
        "hours": "15-16"
    },
    {
        "hours": "16-17"
    },
    {
        "hours": "17-18"
    },
    {
        "hours": "18-19"
    },
    {
        "hours": "19-20"
    },
    {
        "hours": "20-21"
    },    
    {
        "hours": "21-22"
    },    
    {
        "hours": "22-23"
    },
    {
        "hours": "23-24"
    }    
    
  ]
}

He also provided, in the same thread, the below starter code (as an option to use) for the output with id's to use for css styling. This is what I need customized to output how I described above.

I have not fully tested the below so I am not sure if it is suitable for use:

[data-schemaid="times"] tbody tr:nth-child(odd) {
   background-color: #ccc;
}
[data-schemaid="times"] {
   width: 70px;
}
[data-schemaid="times"] td.compact {
  padding: 4px 20px 0 0;
}
[data-schemaid="times"] select {
  height: 18px;
  font-size: 12px;
}

As the JSON schema code has been provided I would require only the styling output to be done. I will need this to work both on desktop and mobile in the iReview theme so preferable this should be done using css.

Please get back to me with any questions. Thank you.

Note #1: My site is WordPress based with JReviews and the iReviews theme. Development should take place in your own environment and provide me with a working demonstration and then the changed and additional files (if any are required).

Edited July 20, 2016 at 11:34 PM by belltree

July 21, 2016 at 10:24 AM