0

How can I set the width of the Cards (or Tiles) in SPO Modern views to full screen without having to increase the height?

I'd like to set the width to 1500px but the width is somehow tied to the height property. I can get it to go full screen but only if the height is at least 500. I want the height to be 200.

I've worked with the Card/Tile layout in SPO modern views quite a bit and I have a good handle on it, but this problem is perplexing.

How can we override the linkage between the height/width properties of the Card?

I've tried all of the following:

  • Removing the class on the container, "class": "sp-card-container"
  • Adding the height/width properties to the first div element.
  • Setting min-height and max-height values
  • Setting fillHorizontally to false or removing it entirely.

None of those made a difference.

This post states the max width is 2x the height. I don't know if that ratio is exact but there's certainly some restriction based on height:

Change the width of a card in Gallery view of a List

My code is just the default Gallery Card with a tweak to the height and width values:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 200,
  "width": 1500,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "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-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Icon1]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Icon1] == '', '–', [$Icon1])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "a",
                "attributes": {
                  "title": "[$Link1]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent  sp-card-keyboard-focusable",
                  "href": "[$Link1]",
                  "target": "=if ([$Link1] == '', '', '_blank')"
                },
                "style": {
                  "pointer-events": "=if ([$Link1] == '', 'none', 'auto')",
                  "text-decoration": "=if ([$Link1] == '', 'none', 'auto')"
                },
                "txtContent": "=if ([$Link1.desc] == '', '–', [$Link1.desc])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Icon2]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content "
                },
                "txtContent": "=if ([$Icon2] == '', '–', [$Icon2])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "a",
                "attributes": {
                  "title": "[$Link2]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent  sp-card-keyboard-focusable",
                  "href": "[$Link2]",
                  "target": "=if ([$Link2] == '', '', '_blank')"
                },
                "style": {
                  "pointer-events": "=if ([$Link2] == '', 'none', 'auto')",
                  "text-decoration": "=if ([$Link2] == '', 'none', 'auto')"
                },
                "txtContent": "=if ([$Link2.desc] == '', '–', [$Link2.desc])"
              }
            ]
          }
        ]
      }
    ]
  }
}

Thank you

0

Your Answer

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