
11,709 questions
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
How do I reduce the height of the background color of the items in the Color column?
Thanks
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"border-radius": "25px",
"display": "flex",
"justify-content": "center",
"align-items": "center"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Green"
]
},
"sp-css-backgroundColor-BgGreen sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Pink"
]
},
"sp-css-backgroundColor-BgCoral sp-field-fontSizeSmall sp-css-color-BlackText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Red"
]
},
"sp-css-backgroundColor-BgRed sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Maroon"
]
},
"sp-css-backgroundColor-BgDarkRed sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Gray"
]
},
"sp-css-backgroundColor-BgGray sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Orange"
]
},
"sp-css-backgroundColor-BgOrange sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Lime"
]
},
"sp-css-backgroundColor-BgSage sp-css-borderColor-SageFont sp-field-fontSizeSmall sp-css-color-BlackText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Purple"
]
},
"sp-css-backgroundColor-BgPurple sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Teal"
]
},
"sp-css-backgroundColor-BgTeal sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Gold"
]
},
"sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-BlackText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Category]",
""
]
},
"sp-css-backgroundColor-BgLightBlue sp-css-color-LightBlueFont",
""
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
},
"txtContent": "[$Color]"
}
Following JSON codes can change the height of the color background in list column.
The line "min-height": "20px" controls the height, change the parament as you want.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"border-radius": "25px",
"min-height": "20px",
"display": "flex",
"justify-content": "center",
"align-items": "center"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Green"
]
},
"sp-css-backgroundColor-BgGreen sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Pink"
]
},
"sp-css-backgroundColor-BgCoral sp-field-fontSizeSmall sp-css-color-BlackText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Red"
]
},
"sp-css-backgroundColor-BgRed sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Maroon"
]
},
"sp-css-backgroundColor-BgDarkRed sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Gray"
]
},
"sp-css-backgroundColor-BgGray sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Orange"
]
},
"sp-css-backgroundColor-BgOrange sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Lime"
]
},
"sp-css-backgroundColor-BgSage sp-css-borderColor-SageFont sp-field-fontSizeSmall sp-css-color-BlackText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Purple"
]
},
"sp-css-backgroundColor-BgPurple sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Teal"
]
},
"sp-css-backgroundColor-BgTeal sp-field-fontSizeSmall sp-css-color-WhiteText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Color]",
"Gold"
]
},
"sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-BlackText",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$Category]",
""
]
},
"sp-css-backgroundColor-BgLightBlue sp-css-color-LightBlueFont",
""
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
},
"txtContent": "[$Color]"
}
Result:
If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.