1

I have formatting on a column which uses a background color for a status. I am using the elmType of div to complete this. I have another field for comments that is multi line and allows for 6 lines of text. When there are two lines of text in the comments field the the div for the status field fully fills it. When a third line of text is entered the div stops and no longer fills the status field vertically.

It does not seem to matter if I add the formatting to the status column before or after the comments have been added. I have tried using the fill style and it does not work with my current JSON. I am able to get it to work if I adjust the min-height style but then all my row will be the height that height.

UPDATE 5/21/2018 (Added JSON and screenshot)

{
  "$schema": 
  "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "color": "white",
    "padding-left": "14px",
    "padding-top": "14px",
    "background-color": {
      "operator": "?",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "@currentField",
            "Complete"
          ]
        },
        "#8bc900",
        {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Claimed"
              ]
            },
            "#ffbf00",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Ready for Review"
                  ]
                },
                "#000cff",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Unclaimed"
                      ]
                    },
                    "#ff0000",
                    ""
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

The DIV if the gap below it has three lines of text in a different column. The max lines of text is set to 6

2
  • Would you mind posting your json and maybe a screenshot of the problem? Thanks! May 17, 2018 at 22:46
  • @theChrisKent I updated my post to include the JSON and an image. Thank you.
    – MrSchu
    May 21, 2018 at 13:44

1 Answer 1

1

This is due to the parent element having the min-height property set.

Sharepoint min-height

The content within is smaller than the minimum height or content in the same row is larger, thus the minimum height is applied.

enter image description here

I have attempted setting height to inherit and 100% to no avail. Even things like align-items: stretch don't work.

It seems we need access to the fields parent class in order to adjust the min-height of the row.

To bypass this you could set the height to a fixed value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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