SharePoint Column JSON formatting alignment
https://sharepoint.stackexchange.com/questions/269789
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
As mentioned in the Title I have some issues with trying to align my background color formatting as shown in the screenshot below:
What I hope to do is to get the BACKGROUND COLOR to align WITHOUT causing the words to move upwards as shown in the 2nd screenshot below:
Below is the code that I am currently using:
{
"elmType": "div",
"txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
"attributes": {},
"style": {
"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": []
}
Thank you in advance for any help!
Suggestions are welcomed too.
UPDATE I've tried the updated code provided by one of the suggestions and below are the results.
It's close to my intended outcome now except the text's vertical alignment is still off (on top instead of middle)
UPDATE 2: Thanks to the suggestions, I had an idea which surprisingly worked. Below is the code and screenshot for those who might face the same issue. It's quite a long approach but it works.
{
"elmType": "div",
"txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
"attributes": {},
"style": {
"border-radius": "0em",
"height": "0",
"min-width": "0em",
"color": "black",
"text-align": "center",
"position": "left",
"top": "0",
"right": "0em",
"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": []
}
Solution
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%",
"display": "flex",
"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": []
}
OTHER TIPS
If the bg color is not priority then you can use SharePoint's default class which is created to format column, check following link for default css class and JSON examples:
Following JSON I am using in my columns:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div", "attributes": {
"class": "=if(@currentField == true, 'sp-field-severity--good', 'sp-field-severity--blocked') + ' ms-fontColor-neutralSecondary'"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == true, 'CheckMark', 'ErrorBadge')"
}
},
{
"elmType": "span",
"txtContent": "=if(@currentField == true, 'Yes', 'No')"
}
]
}
