2

As mentioned in the Title I have some issues with trying to align my background color formatting as shown in the screenshot below:

enter image description here

What I hope to do is to get the BACKGROUND COLOR to align WITHOUT causing the words to move upwards as shown in the 2nd screenshot below:

enter image description here

Below is the code that I am currently using:


{
  "elmType": "div",
  "txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
  "attributes": {},
  "style": {
    "display": "table-cell",
    "text-align": "center",
    "vertical-align": "middle",
    "background-color": {
      "operator": "?",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "@currentField",
            "Approved"
          ]
        },
        "#ABDB77",
        {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$FlowStatus]",
                "Expired"
              ]
            },
            "#FF6347",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Pending"
                  ]
                },
                "#FFD700",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Rejected"
                      ]
                    },
                    "#bcbcbc",
                    ""
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "customRowAction": {},
  "children": []
}

Thank you in advance for any help!

Suggestions are welcomed too.

UPDATE I've tried the updated code provided by one of the suggestions and below are the results.

enter image description here

It's close to my intended outcome now except the text's vertical alignment is still off (on top instead of middle)

UPDATE 2: Thanks to the suggestions, I had an idea which surprisingly worked. Below is the code and screenshot for those who might face the same issue. It's quite a long approach but it works.

{
    "elmType": "div",
    "txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
    "attributes": {},
    "style": {
      "border-radius": "0em",
       "height": "0",
       "min-width": "0em",
       "color": "black",
       "text-align": "center",
       "position": "left",
       "top": "0",
       "right": "0em",
      "background-color": {
        "operator": "?",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "@currentField",
              "Approved"
            ]
          },
          "#ABDB77",
          {
            "operator": "?",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$FlowStatus]",
                  "Expired"
                ]
              },
              "#FF6347",
              {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@currentField",
                      "Pending"
                    ]
                  },
                  "#FFD700",
                  {
                    "operator": "?",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "@currentField",
                          "Rejected"
                        ]
                      },
                      "#bcbcbc",
                      ""
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    "customRowAction": {},
    "children": []
  }

enter image description here

  • What is the current output of this JSON code? as shown in image 1 or image 2? – Ganesh Sanap Sep 24 at 6:28
  • Apologies for the edit. I missed out 1 line in my code. The current code output is image 1. – cyw_bat Sep 24 at 6:52
1

If you want the div with full width then try adding "width": "100%" to the style attribute, like:

{
  "elmType": "div",
  "txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
  "attributes": {},
  "style": {
    "width": "100%",
    "display": "table-cell",
    "text-align": "center",
    "vertical-align": "middle",
    "background-color": {
      "operator": "?",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "@currentField",
            "Approved"
          ]
        },
        "#ABDB77",
        {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$FlowStatus]",
                "Expired"
              ]
            },
            "#FF6347",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Pending"
                  ]
                },
                "#FFD700",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Rejected"
                      ]
                    },
                    "#bcbcbc",
                    ""
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "customRowAction": {},
  "children": []
}

Update:

Also, you can try adding padding to your div by removing display attribute as given below:

{
    "elmType": "div",
    "txtContent": "=if([$FlowStatus] == 'Expired', 'Expired', @currentField",
    "attributes": {},
    "style": {
      "padding": "0 25%",
      "display": "flex",
      "text-align": "center",
      "vertical-align": "middle",
      "background-color": {
        "operator": "?",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "@currentField",
              "Approved"
            ]
          },
          "#ABDB77",
          {
            "operator": "?",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$FlowStatus]",
                  "Expired"
                ]
              },
              "#FF6347",
              {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@currentField",
                      "Pending"
                    ]
                  },
                  "#FFD700",
                  {
                    "operator": "?",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "@currentField",
                          "Rejected"
                        ]
                      },
                      "#bcbcbc",
                      ""
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    "customRowAction": {},
    "children": []
  }
  • I've tried adding "width": "100%", to the style attribute but it seems like there are no changes. Thank you for the suggestion though! – cyw_bat Sep 24 at 7:08
  • Can you add screenshot of how is it showing after adding width? If it is not working for you then try removing display attribute and adding width attribute. – Ganesh Sanap Sep 24 at 7:11
  • It looks exactly the same as the first screenshot. Removing the display attribute while adding the width attribute will result in exactly the same output as screenshot 2. – cyw_bat Sep 24 at 7:16
  • Then you can add some padding-top or top to make you content in the middle. – Ganesh Sanap Sep 24 at 7:38
  • Try updated code. This is working for me. – Ganesh Sanap Sep 24 at 8:17
0

If the bg color is not priority then you can use SharePoint's default class which is created to format column, check following link for default css class and JSON examples:

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#style-guidelines

Following JSON I am using in my columns:

{ 
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",  "attributes": {
"class": "=if(@currentField == true, 'sp-field-severity--good', 'sp-field-severity--blocked') + ' ms-fontColor-neutralSecondary'"
},
"children": [
{
  "elmType": "span",
  "style": {
    "display": "inline-block",
    "padding": "0 4px"
  },
  "attributes": {
    "iconName": "=if(@currentField == true, 'CheckMark', 'ErrorBadge')"
  }
},
{
  "elmType": "span",
  "txtContent": "=if(@currentField == true, 'Yes', 'No')"
}
  ]
}
  • thanks for the suggestion! unfortunately the bg color is important. – cyw_bat Sep 25 at 0:03

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.