1

I'm fairly new to using JSON and I'm trying to create a Gallery view to use with dynamic filtering. I have the view working the way I want, but I can't get the width and height of the 'card' to be what I want.

The width of my card is fine, but the height is too tall. If I change the height in the JSON, the width of the card get smaller.

In the image you can see all of the space below the text that I want to get rid of.

enter image description here

Here's my JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": "150",
  "width": "600",
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "align-items": "stretch",
      "margin-bottom": "16px",
      "flex-grow": "1",
      "justify-content": "space-around",
      "padding": "5px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "100%",
          "flex-wrap": "wrap",
          "display": "flex",
          "box-sizing": "border-box",
          "padding": "4px 8px 5px 8px",
          "border-radius": "2px"
        },
        "attributes": {
          "class": "ms-bgColor-neutralLighterAlt"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "left"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "color": "#333333",
                  "font-size": "16px",
                  "font-weight": "600",
                  "margin-bottom": "5px"
                },
                "txtContent": "[$Title]"
              }
            ]
          }
        ]
      }
    ]
  }
}

Any help or tips are greatly appreciated!

Improve this question

2 Answers 2

Reset to default
0

Try adding width & height properties inside style like:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "height": "150",
      "width": "600",
      "align-items": "stretch",
      "margin-bottom": "16px",
      "flex-grow": "1",
      "justify-content": "space-around",
      "padding": "5px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "height": "100%",
          "flex-wrap": "wrap",
          "display": "flex",
          "box-sizing": "border-box",
          "padding": "4px 8px 5px 8px",
          "border-radius": "2px"
        },
        "attributes": {
          "class": "ms-bgColor-neutralLighterAlt"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "left"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "color": "#333333",
                  "font-size": "16px",
                  "font-weight": "600",
                  "margin-bottom": "5px"
                },
                "txtContent": "[$Title]"
              }
            ]
          }
        ]
      }
    ]
  }
}
Improve this answer
1
  • Thank you for the suggestion, but this didn't completely solve the issue. It did fix the height, but it made the width of the cards less and leaves a large space when it wraps (see image). Changing the width and height doesn't do anything.
    – KarenI
    Aug 17, 2022 at 14:54
0

Add your Width and Height without the quotes:

"height": 150,
"width": 600,
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.