How to set Overflow- y in Microsoft lists (Tile view) ?

Question

Hello,

I've create a tile view in my lists. On some tiles information in cut because its to long. So I've add in style : "overflow-y": "auto.

But when I'm clickin the scroll bar it does not scroll the information but it "enters to that tile. How to solve that issue ?

Answer 1

Hi @Wojtas ,

I couldn't reproduce this issue on my end. My JSON code is shown below:

{     
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",  
  "hideSelection": true,     
  "width": "1800",      
  "height": "70",      
  "formatter": {     
    "elmType": "div",    
    "children": [   
      {     
        "elmType": "div",    
        "attributes": {    
          "class": "ms-bgColor-themeLighterAlt ms-bgColor-red--hover ms-fontColor-blue--hover"   
        },   
        "style": {   
          "display": "flex",  
          "flex-wrap": "wrap",  
          "overflow": "auto"   
        },  
        "children": [   
          {  
            "elmType": "div",  
            "style": {  
              "text-align": "center",  
              "margin": "auto"  
            },  
            "children": [  
              {  
                "elmType": "div",  
                "attributes": {  
                  "class": "sp-row-title "  
                },  
                "txtContent": "[$NamesOfStudents]"  
              }   
            ]  
          }  
        ]  
      }  
    ]   
  }  
}  

Result:

You can share your code here or have a try to mine.

----------

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hello,

My JSON code. Below sorry I'm Newbie on this forum.

{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",  
  "height": 552,  
  "width": 294,  
  "hideSelection": false,  
  "fillHorizontally": true,  
  "formatter": {  
    "elmType": "div",  
    "attributes": {  
      "class": "sp-card-container"  
    },  
    "children": [  
      {  
        "elmType": "button",  
        "attributes": {  
          "class": "sp-card-defaultClickButton",  
          "role": "presentation"  
        },  
        "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": {  
                  "class": "ms-fontColor-neutralSecondary sp-card-label"  
                },  
                "txtContent": "[!Title.DisplayName]"  
              },  
              {  
                "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": {  
                  "class": "ms-fontColor-neutralSecondary sp-card-label"  
                },  
                "txtContent": "[!Status.DisplayName]"  
              },  
              {  
                "elmType": "div",  
                "attributes": {  
                  "class": "sp-card-content sp-card-formatterRef"  
                },  
                "children": [  
                  {  
                    "columnFormatterReference": "[$Status]"  
                  }  
                ]  
              }  
            ]  
          },  
          {  
            "elmType": "div",  
            "attributes": {  
              "class": "sp-card-displayColumnContainer"  
            },  
            "children": [  
              {  
                "elmType": "p",  
                "attributes": {  
                  "class": "ms-fontColor-neutralSecondary sp-card-label"  
                },  
                "txtContent": "[!Pion.DisplayName]"  
              },  
              {  
                "elmType": "div",  
                "attributes": {  
                  "class": "sp-card-content sp-card-formatterRef"  
                },  
                "children": [  
                  {  
                    "columnFormatterReference": "[$Pion]"  
                  }  
                ]  
              }  
            ]  
          },  
          {  
            "elmType": "div",  
            "attributes": {  
              "class": "sp-card-displayColumnContainer"  
            },  
            "children": [  
              {  
                "elmType": "p",  
                "attributes": {  
                  "class": "ms-fontColor-neutralSecondary sp-card-label"  
                },  
                "txtContent": "[!Obszar.DisplayName]"  
              },  
              {  
                "elmType": "p",  
                "attributes": {  
                  "title": "[$Obszar]",  
                  "class": "ms-fontColor-neutralPrimary sp-card-content "  
                },  
                "txtContent": "=if ([$Obszar] == '', '–', [$Obszar])"  
              }  
            ]  
          },  
          {  
            "elmType": "div",  
            "attributes": {  
              "class": "sp-card-displayColumnContainer"  
            },  
            "children": [  
              {  
                "elmType": "p",  
                "attributes": {  
                  "class": "ms-fontColor-neutralSecondary sp-card-label"  
                },  
                "txtContent": "[!Ostatnieotwartedzia_x0142_anie.DisplayName]"  
              },  
              {  
                "elmType": "p",  
                "attributes": {  
                  "title": "[$Ostatnieotwartedzia_x0142_anie]",  
                  "class": "ms-fontColor-neutralPrimary sp-card-content  sp-card-multiline"  
                },  
                "txtContent": "=if ([$Ostatnieotwartedzia_x0142_anie] == '', '–', [$Ostatnieotwartedzia_x0142_anie])",  
                "style": {  
                  "overflow-y": "auto",  
                  "text-overflow": "ellipsis",  
                  "-webkit-line-clamp": "2",  
                  "height": "150px"  
                }  
              }  
            ]  
          },  
          {  
            "elmType": "div",  
            "attributes": {  
              "class": "sp-card-previewColumnContainer"  
            },  
            "children": [  
              {  
                "elmType": "p",  
                "attributes": {  
                  "class": "ms-fontColor-neutralSecondary sp-card-label"  
                },  
                "txtContent": "[!Osoba_x0020_kontaktowa.DisplayName]"  
              },  
              {  
                "elmType": "div",  
                "style": {  
                  "display": "flex"  
                },  
                "children": [  
                  {  
                    "elmType": "p",  
                    "attributes": {  
                      "class": "sp-card-userEmptyText"  
                    },  
                    "txtContent": "=if(length([$Osoba_x0020_kontaktowa]) == 0, '–', '')"  
                  },  
                  {  
                    "forEach": "personIterator in [$Osoba_x0020_kontaktowa]",  
                    "elmType": "a",  
                    "attributes": {  
                      "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"  
                    },  
                    "style": {  
                      "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"  
                    },  
                    "children": [  
                      {  
                        "elmType": "img",  
                        "defaultHoverField": "[$personIterator]",  
                        "attributes": {  
                          "src": "=getUserImage([$personIterator.email], 'S')",  
                          "title": "[$personIterator.title]",  
                          "class": "sp-card-userThumbnail"  
                        },  
                        "style": {  
                          "display": "=if(length([$Osoba_x0020_kontaktowa]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"  
                        }  
                      },  
                      {  
                        "elmType": "div",  
                        "attributes": {  
                          "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"  
                        },  
                        "style": {  
                          "display": "=if(length([$Osoba_x0020_kontaktowa]) > 5 && loopIndex('personIterator') == 4, '', 'none')"  
                        },  
                        "customCardProps": {  
                          "formatter": {  
                            "elmType": "div",  
                            "attributes": {  
                              "class": "sp-card-personCallout"  
                            },  
                            "children": [  
                              {  
                                "forEach": "personIterator in [$Osoba_x0020_kontaktowa]",  
                                "elmType": "div",  
                                "attributes": {  
                                  "class": "sp-card-userContainer sp-card-userCustomCard"  
                                },  
                                "style": {  
                                  "display": "=if(loopIndex('personIterator') < 4, 'none', '')"  
                                },  
                                "children": [  
                                  {  
                                    "elmType": "img",  
                                    "defaultHoverField": "[$personIterator]",  
                                    "attributes": {  
                                      "src": "=getUserImage([$personIterator.email], 'S')",  
                                      "title": "[$personIterator.title]",  
                                      "class": "sp-card-userThumbnail"  
                                    }  
                                  }  
                                ]  
                              }  
                            ]  
                          },  
                          "openOnEvent": "hover"  
                        },  
                        "children": [  
                          {  
                            "elmType": "span",  
                            "txtContent": "='+' + toString(length([$Osoba_x0020_kontaktowa]) - (4))"  
                          }  
                        ]  
                      }  
                    ]  
                  },  
                  {  
                    "elmType": "div",  
                    "attributes": {  
                      "class": "sp-card-userTitle"  
                    },  
                    "style": {  
                      "display": "=if(length([$Osoba_x0020_kontaktowa]) == 1, '', 'none')"  
                    },  
                    "defaultHoverField": "[$personIterator]",  
                    "txtContent": "[$Osoba_x0020_kontaktowa.title]"  
                  }  
                ]  
              }  
            ]  
          },  
          {  
            "elmType": "div",  
            "attributes": {  
              "class": "sp-card-lastTextColumnContainer"  
            },  
            "children": [  
              {  
                "elmType": "p",  
                "attributes": {  
                  "class": "ms-fontColor-neutralSecondary sp-card-label"  
                },  
                "txtContent": "[!Priorytet.DisplayName]"  
              },  
              {  
                "elmType": "div",  
                "attributes": {  
                  "class": "sp-card-content sp-card-formatterRef"  
                },  
                "children": [  
                  {  
                    "columnFormatterReference": "[$Priorytet]"  
                  }  
                ]  
              }  
            ]  
          }  
        ]  
      }  
    ]  
  }  
}  

Answer 3

to show You what I mean, look at that picture.