Forum Discussion
JSON spacing issue
I am new to using JSON and found the amazing List-Formatting on GitHub but because I don't know how to manipulate every little bit, I'm having trouble getting it to do what I want. This is the original code:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
"hideColumnHeader": "true",
"hideSelection": true,
"tileProps": {
"hideSelection": true,
"width": "180",
"height": "150",
"formatter": {
"elmType": "a",
"attributes": {
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"min-width": "180px",
"min-height": "150px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"attributes": {
"iconName": "[$Icon]",
"class": "ms-fontSize-su"
}
}
]
}
]
}
]
}
},
"rowFormatter": {
"elmType": "a",
"attributes": {
"href": "[$URL]",
"target": "=if([$NewTab] == true, '_blank', '')"
},
"style": {
"width": "100%"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"width": "100%",
"min-height": "150px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"attributes": {
"iconName": "[$Icon]",
"class": "ms-fontSize-su"
}
}
]
}
]
}
]
}
}
I figured out how to change the color of the tiles. What I'm struggling with is being able to control the spacing/wrapping of my content. We want to use this to show steps in our recruiting process and because each step name doesn't wrap to the next line, the arrow icons I applied aren't lined up:
Does anyone know how I can manipulate the JSON to allow the icons to line up all the same? I tried adding spacing and SharePoint doesn't pick it up correctly. Thank you in advance!!
Beth_Culpepper add a style under the txtContent [$Title] line and set the height to taste.
"txtContent": "[$Title]", "style": { "height": "90px" } },
Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)
- RobElliottSilver Contributor
Beth_Culpepper add a style under the txtContent [$Title] line and set the height to taste.
"txtContent": "[$Title]", "style": { "height": "90px" } },
Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)- Beth_CulpepperBrass ContributorThank you! That worked beautifully!