Hello!
I'm using the following JSON code to format a text field that stores the entire history of an approval process for a Sharepoint list item:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"position": "relative",
"width": "100%",
"height": "60px"
},
"children": [
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"width": "100%",
"height": "3px"
},
"attributes": {
"class": "ms-bgColor-neutralSecondaryAlt"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"display": "flex",
"align-items": "center",
"justify-content": "=if([$TDapprovalstatus]=='Pending approvals','center',if([$TDapprovalstatus]=='New','left','flex-end'))",
"width": "100%",
"height": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"width": "20px",
"height": "20px",
"border-radius": "50%",
"cursor": "pointer"
},
"attributes": {
"class": "=if([$TDapprovalstatus]=='Not approved'||[$TDapprovalstatus]=='Canceled','ms-bgColor-red',if([$TDapprovalstatus]=='Pending approvals','ms-bgColor-yellow',if([$TDapprovalstatus]=='New','ms-bgColor-blue','ms-bgColor-green')))"
},
"customCardProps": {
"directionalHint": "rightCenter",
"openOnEvent": "click",
"isBeakVisible": true,
"formatter": {
"elmType": "div",
"style": {
"width": "300px",
"height": "300px",
"padding": "10px 20px 10px 20px",
"background-color": "#E6E6E3"
},
"children": [
{
"elmType": "div",
"txtContent": "=if([$TDapprovalstatus]!='New',[$ApprovalTimeline],'No History Available'",
"style": {
"width": "100%",
"height": "100%"
}
}
]
}
}
}
]
}
]
}
This formatting uses a hover card to display the contents of the field, it has fixed dimensions (300x300px) and a gray background color (#E6E6E3). The problem is that when the text is long and exceeds the height of the card, the gray background scrolls up along with the text, revealing the white background of the parent element:
Is there any way to access a parent element, like this case, to format its background? Or another way to prevent the hover card's background from scrolling?
Thanks!