How to Make List Items Scrollable in Modern SharePoint Lists?

Question

How to Make List Items Scrollable in Modern SharePoint Lists?

Cadence Lamphiear 20

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

AllenXu-MSFT 24,951 Reputation points Moderator

2024-12-06T06:47:36.5833333+00:00

Hi @Cadence Lamphiear,

Is the Grid View you mean that the list view by clicking "Edit in grid view"? As per my knowledge, the grid view is not supported to format. Only views shown in the list settings like below can be formatted.
Cadence Lamphiear 20 Reputation points

2024-12-06T16:56:08.9666667+00:00

Hello @AllenXu-MSFT

I apologize for the confusion. I meant to refer to the gallery view, not the grid view. I'm using the gallery view format and have been able to customize the formatting successfully.I would just like to further customize the gallery view to make each individual tile scrollable. The data in each tile will have different lengths, so I'm aiming for a uniform size format for each tile, since this is for a SharePoint site.

Accepted answer

1 additional answer

Your answer

AllenXu-MSFT 24,951 Reputation points Moderator

2024-12-06T06:47:36.5833333+00:00

Hi @Cadence Lamphiear,

Is the Grid View you mean that the list view by clicking "Edit in grid view"? As per my knowledge, the grid view is not supported to format. Only views shown in the list settings like below can be formatted.
Cadence Lamphiear 20 Reputation points

2024-12-06T16:56:08.9666667+00:00

Hello @AllenXu-MSFT

I apologize for the confusion. I meant to refer to the gallery view, not the grid view. I'm using the gallery view format and have been able to customize the formatting successfully.I would just like to further customize the gallery view to make each individual tile scrollable. The data in each tile will have different lengths, so I'm aiming for a uniform size format for each tile, since this is for a SharePoint site.

Answer 1

[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.

Answer 2

Cadence Lamphiear 20

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

AllenXu-MSFT 24,951 Reputation points Moderator

2024-12-16T07:22:50.8166667+00:00

@Cadence Lamphiear,

Gald to hear that this issue has been resolved. And thanks for sharing your solution here. Great contribution to our community! As we have a policy that users cannot accept answers post by themselves, I'm going to write a summary to this thread and kindly help us accept the summary as answer to archive this thread so that others who stuck in similar issues could get answered quickly.

Thanks again.

Have a good day.

Share via

How to Make List Items Scrollable in Modern SharePoint Lists?

1 additional answer

Your answer