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

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

1 Answer 1

Reset to default
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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.