1

I am using JSON to format list view in SharePoint online list. Why is my tile view in web part on site pages rendering wider than in the default list page?

A related question: How can I change the height of the Cover section (cover is an image). Warning: I am a newbie to JSON. Here is my JSON code (modified from existing SharePoint code):

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 360,
  "width": 250,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation",
          "href": "[$Link]"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "display": "=if([$Cover] == '', 'none', '')"
                        },
                        "attributes": {
                          "src": "=getThumbnailImage([$Cover], 400, 400)",
                          "title": "[$Cover.fileName]",
                          "class": "sp-card-imagePreview"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Notes]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content  sp-card-multiline",
                  "width": 250
                },
                "txtContent": "=if ([$Notes] == '', '–', [$Notes])",
                "style": {
                  "height": 150,
                  "word-break": "normal"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Thanks.

Improve this question
2
  • SharePoint modern pages are responsive by design. I think because of this SharePoint tries to fit the tiles in column/section layout you have used in your SharePoint page hence tiles are looking wider.
    – Ganesh Sanap - Microsoft MVP
    Mar 14 at 15:08
  • Thank @GaneshSanap, I thought that might be the case. I wanted to verify that I wasn't missing something in my coding.
    – vrm
    Mar 15 at 16:06

1 Answer 1

Reset to default
0

SharePoint online modern pages are responsive by design. I think because of this behavior SharePoint tries to fit the tiles in column/section layout you have used in your SharePoint page hence tiles are looking wider in web part on a site page than in the default list page.

For increasing height of image, you can try adding height to style property in img element like:

"style": {
    "height": "500px",
    "width": "500px"
}

Or try to get the thumbnail with bigger size using getThumbnailImage operator in src property like:

"src": "=getThumbnailImage([$Cover], 500, 500)",

In case of image size is bigger than tile size, you might need to increase the width (250) / height (360) of the tile.

Improve this answer

Your Answer

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

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