SharePoint Online: reducing the height of the color background in list column

Question

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]"
}

Answer 1

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.