If you want the div
with full width then try adding "width": "100%"
to the style
attribute, like:
{
"elmType": "div",
"txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
"attributes": {},
"style": {
"width": "100%",
"display": "table-cell",
"text-align": "center",
"vertical-align": "middle",
"background-color": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Approved"
]
},
"#ABDB77",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"[$FlowStatus]",
"Expired"
]
},
"#FF6347",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Pending"
]
},
"#FFD700",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Rejected"
]
},
"#bcbcbc",
""
]
}
]
}
]
}
]
}
},
"customRowAction": {},
"children": []
}
Update:
Also, you can try adding padding
to your div
by removing display
attribute as given below:
{
"elmType": "div",
"txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
"attributes": {},
"style": {
"padding": "0 25%",
"text-align": "center",
"vertical-align": "middle",
"background-color": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Approved"
]
},
"#ABDB77",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"[$FlowStatus]",
"Expired"
]
},
"#FF6347",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Pending"
]
},
"#FFD700",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Rejected"
]
},
"#bcbcbc",
""
]
}
]
}
]
}
]
}
},
"customRowAction": {},
"children": []
}