How to Make List Items Scrollable in Modern SharePoint Lists?

Cadence Lamphiear 20 Reputation points
2024-12-05T22:12:03.1633333+00:00

I'm working with a modern SharePoint list in gallery view and I'm trying to make the content within each list item scrollable. I've attempted to use JSON formatting to achieve this but haven't had any success so far.

Here's what I've tried:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 450,
  "width": 250,
  "hideSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "style": {
      "overflow-y": "auto",
      "height": "=if([$Title] == 'No current alerts.', '300px', '450px')",
    },
    "children": [
     .......
    ]
  }
}

I've also tried "overflow-y": "scroll".

Despite this, the content within the tiles is not scrollable. Has anyone successfully implemented scrollable list items in a modern SharePoint list, specifically in gallery view? Any guidance or examples would be greatly appreciated!

Thanks in advance for your help!


Edit: Here's an example of the items in the sidebar of the SharePoint site. The information comes from an RSS Feed, so there is no guarantee of the length of the text. I would like to set each tile to a max-height of 400px. If the content exceeds this height, the individual tile should be scrollable to view the rest of the text. Right now, I have to manually edit the "height" property if something doesn't fit right.
User's image

Microsoft 365 and Office | SharePoint | Development
Microsoft 365 and Office | SharePoint | For business | Windows
{count} votes

Accepted answer
  1. AllenXu-MSFT 24,951 Reputation points Moderator
    2024-12-16T07:30:35.53+00:00

    [Issue symptoms]:

    Working with a modern SharePoint list in gallery view and I'm trying to make the content within each list item scrollable.

    Code tried:

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
      "height": 450,
      "width": 250,
      "hideSelection": true,
      "fillHorizontally": true,
      "formatter": {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-container"
        },
        "style": {
          "overflow-y": "auto",
          "height": "=if([$Title] == 'No current alerts.', '300px', '450px')",
        },
        "children": [
         .......
        ]
      }
    }
    

    Also tried "overflow-y": "scroll".

    [Solution]:

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
      "height": 475,
      "width": 250,
      "hideSelection": true,
      "fillHorizontally": true,
      "formatter": {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-container"
        },
        "style": {
          "height": "=if([$Title] == 'No current alerts.', '300px', '450px')"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
            },
            "style": {
              "overflow-y": "auto",
              "max-height": "450px"
            },
            "children": [...]
    }
    

    User's image

    Thanks for @Cadence Lamphiear sharing his solution here.

    1 person found this answer helpful.
    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. Cadence Lamphiear 20 Reputation points
    2024-12-13T23:04:20.2833333+00:00

    I figured it out!

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
      "height": 475,
      "width": 250,
      "hideSelection": true,
      "fillHorizontally": true,
      "formatter": {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-container"
        },
        "style": {
          "height": "=if([$Title] == 'No current alerts.', '300px', '450px')"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
            },
            "style": {
              "overflow-y": "auto",
              "max-height": "450px"
            },
            "children": [...]
    }
    

    Here is the result... Each tile is now scrollable individually, accommodating for different amounts of text.

    User's image


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.