I'm having an issue with my View Format JSON. I'm attempting to utilize the honeycomb icon view under grouped categories. When I go to expand each group the icons are on a fixed position on the screen and the group headers do not move down. See screenshot below:
Here is the code I'm using - can someone see my error?
{
"hideSelection": true,
"hideColumnHeader": true,
"hideListHeader": true,
"groupProps": {
"headerFormatter": {
"elmType": "div",
"attributes": {
"class": "sp-row-card"
},
"style": {
"color": "black",
"background-color": "#FAF9F9",
"flex-grow": "1",
"display": "flex",
"flex-direction": "row",
"box-sizing": "border-box",
"padding": "4px 8px 5px 8px",
"border-radius": "6px",
"align-items": "center",
"flex-wrap": "nowrap",
"overflow": "auto",
"margin": "1px 4px 4px 1px"
},
"children": [
{
"elmType": "img",
"style": {
"max-width": "24px",
"max-height": "24px",
"margin-top": "2px",
"border-radius": "2px"
}
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"padding": "5px 5px 5px 5px",
"font-weight": "500",
"font-size": "15px"
},
"txtContent": "@group.fieldData.displayValue"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"justify-content": "center"
}
}
]
}
]
}
},
"rowFormatter": {
"elmType": "div",
"style": {
"position": "absolute",
"width": "150px",
"height": "150px",
"left": "=if(floor(@rowIndex/5) % 2 == 0 , @rowIndex % 5 * 150 + 'px' , @rowIndex % 5 * 150 + 75 + 'px' )",
"top": "=floor(@rowIndex / 5) * 125 + 'px'"
},
"children": [
{
"elmType": "a",
"style": {
"position": "relative",
"display": "flex",
"justify-content": "center",
"align-items": "center",
"width": "100%",
"height": "100%"
},
"attributes": {
"href": "[$URL]",
"target": "_blank"
},
"children": [
{
"elmType": "svg",
"style": {
"fill": "currentColor",
"cursor": "pointer"
},
"attributes": {
"viewBox": "-150 -150 300 300",
"class": "ms-fontColor-themePrimary"
},
"children": [
{
"elmType": "path",
"attributes": {
"d": "M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
"cursor": "pointer",
"width": "100%",
"height": "100%"
},
"attributes": {
"class": "ms-fontColor-white ms-fontColor-themeLight--hover"
},
"children": [
{
"elmType": "div",
"style": {
"font-size": "32px",
"margin-bottom": "5px"
},
"attributes": {
"iconName": "[$Icon]"
}
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"width": "75%",
"text-align": "center"
},
"txtContent": "[$Title]"
}
]
}
]
}
]
}
}
Thanks!
