I'm currently using Umbraco with the data-type grid layout and I am trying to add custom settings (CSS classes) to each row/cell. The results are somewhat working, but I want to improve it. Here's the user interface:
https://i.stack.imgur.com/iYFSD.png
The "modifier": "{X}" produces varied results and out of the 3 options available, all seemed to work "best".
Here is the JSON snippet:
[
{
"label": "Message Box",
"description": "Message Box",
"key": "class",
"view": "checkbox",
"modifier": "{3}",
"applyTo": "cell",
"config": {
"items": {
"key1": {
"value": "value1"
},
"key2": {
"value": "value2"
},
"key3": {
"value": "value3"
},
"key4": {
"value": "value4"
}
}
}
}
]
However, when I apply these classes to the cells/rows, they end up looking like this:
<div class="["key1", "key2", "key3", "key4"]">
Unfortunately, the HTML cannot interpret these classes correctly due to the square brackets [] and commas. How can I ensure that the classes are applied properly to the elements?
For reference, here is the modified Foundation5 on Pastebin
You can also find Umbraco's checkbox code on Pastebin