1

I have formatted a Tile/Gallery view of a SharePoint list and would like to know if anyone knows how to actually center these tiles/list on the page within the web part?

This is my code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideSelection": true,
  "width": "180",
  "height": "150",
  "formatter": {
    "elmType": "a",
    "attributes": {
      "href": "[$URL]",
      "target": "=if([$NewTab] == true, '_blank', '')"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeDark  ms-fontColor-white ms-bgColor-warning--hover ms-fontColor-black--hover"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "min-width": "180px",
          "min-height": "150px",
          "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]",
                "style": {
                  "height": "60px"
                }
              },
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "[$Icon]",
                  "class": "ms-fontSize-su"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

And this is what my page currently looks like:

enter image description here

I would LOVE to center align this list.

Any and all help is appreciated!

2 Answers 2

0

I don't think you will be able to center align whole list using SharePoint JSON view formatting.

View formatting is used to customize the display of each "list item" when an item is loaded in a list view.

JSON written in view formatting repeats for each item in a list. So, if you give left margin or padding in JSON directly to make it center align, it will affect display of all items.

You can try adding left margin or padding based on @rowIndex, but it will not be the full proof solution for your requirements.

Documentation: Use view formatting to customize SharePoint

0

According to my research and testing, unfortunately, it is currently not possible to center the whole SharePoint List within List Web Part using JSON.

Thanks for your understanding.

===================================

If the answer is helpful, please click "√" on the left panel of the answer and kindly upvote it.

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.