2

I have a custom formatted column in a Sharepoint List that changes the background color based on the content of the field.

When the content of another field in it's row is too large the background color does not fill the height of the row.

Is there a way to force the background color to inherit the height of it's row?

This is what is looks like with default heights in place. (background does not cover full height)

enter image description here

And this is what it looks like if I specify a height of 100px. (background is too large)

enter image description here

Here is my JSON:

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "padding-left": "5px",
    "background-color": {
      "operator": "?",
      "operands": [
        {
          "operator": "==",
          "operands": [
            {
              "operator": "toString()",
              "operands": [
                "@currentField"
              ]
            },
            "GR"
          ]
        },
        "rgba(31, 73, 125, .2)",
        {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                {
                  "operator": "toString()",
                  "operands": [
                    "@currentField"
                  ]
                },
                "IDC"
              ]
            },
            "rgba(149, 144, 114, .2)",
            "inherit"
          ]
        }
      ]
    }
  }
}

Things I have tried:

height: inherit;
height: 100%;
height: fill-content;

1

It is because it inherits the min-height from its parent element and the content “IDC/GR” is smaller than the minimum height, so the minimum height is applied.

enter image description here

If the content is larger than the minimum height, the min-height property has no effect.

enter image description here

As a workaround, you may need to set the height to a fixed length.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.