View Formatting Issue - Grouped Section header not moving when expanding
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? { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "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!
