0

I customized a list view that, contains the followings:

  {
    "elmType": "div",
    "attributes": {
      "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
    }

The view renders fine when I look at the list, but I miss some styling when showing the list in a list web part on a modern site. Like the background color, defined in the ms-bgColor-themeLighterAlt class is ignored. If I add "background-color": "#edffed" to style, the background is correctly colored. Is this a known limitation or is there some way to create a view using the theme classes and that works in the list web part too?

Edit: Here's my complete json based on the answer of LZ_MSFT but still not working. If I remove the class from attributes, then the coloring disappears completely.

{
    "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "additionalRowClass": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover",
      "hideSelection": "true",
    "hideColumnHeader": "true",
    "rowFormatter": {

      "elmType": "a",
      "attributes": {
        "href": "[$link]",
        "target": "=if([$NewTab] == true, '_blank', '')"
      },
      "style": {
        "float": "left"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
          },
          "style": {
            "display": "flex",
            "flex-wrap": "wrap",
            "min-width": "180px",
            "min-height": "50px",
            "margin-right": "10px",
            "margin-top": "10px",
            "box-shadow": "2px 2px 4px darkgrey"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "text-align": "center",
                "margin": "auto"
              },
              "children": [
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "sp-row-title "
                  },
                  "txtContent": "[$Title]"
                },
                {
                  "elmType": "div",
                  "attributes": {
                    "iconName": "[$Icon]",
                    "class": "ms-fontSize-su"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }

View in list: enter image description here

View in web part: enter image description here

I also don't get, why the boxes are not aligned, but that is the same on both places, so probably something in the row formatting.

0

I can reproduce this issue in my test environment.

When I check the code in modern site page using IE F12 developer tools. All the class added, unfortunately, we can not see all the class definition in this page. So, the class not works.

enter image description here

In currently, we have to add some styles in "style" property in JSON code to achieve it.

Here is a thread with similar issue for your reference.

Column Formatting in List View Web Part

  • Thank you for the answer, but didn't help for me. Updated my post with full code and screenshots. – vilmarci May 7 at 7:07
  • I updated the reply. And I can reproduce this issue in my test environment. – LZ_MSFT May 7 at 8:38
  • Thanks, so I need to wait and/or put all styling in the template instead of using class. For the offset in the view, I will open another question. – vilmarci May 7 at 10:33

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.