Forum Discussion

joneirik's avatar
joneirik
Copper Contributor
Sep 24, 2019

Elements in a list are not showing after applying custom formatting

Hello I have a SharePoint list where the items in the list are displayed to users using custom formatting defined using a json-file. The items that are being displayed are being displayed correctl...
Lists
SharePoint Online
Norman Young's avatar
Norman Young
MVP
Sep 25, 2019

Hi joneirik,

 

Can you share the JSON code and list definition?

 

As you pointed out, there are related issues being posted in the SharePoint space. I wonder if something "new" is causing JSON to limit rows.

 

Norm

joneirik's avatar
joneirik
Copper Contributor
Sep 27, 2019

Norman Young 

Another update. Using the tiles didn't really solve the problem, just created anther one, not being able to set the correct view as default for all users.

What seems to break the json is "float": "left" when added to the "style" of the main div.

    "rowFormatter": {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "stretch",
        "margin-bottom": "16px",
        "min-width": "150px",
        "max-width": "500px",
        "flex-grow": "1",
        "justify-content": "space-around",
        "box-shadow": "4px 4px 8px grey",
        "float": "left",
        "width": "50%",
        "padding": "5px"
      },

 When added, the scrolling dies and on a refresh of the page, only a small subset of the items in the list is displayed. 

However, not having the float also sort of breaks the desired formatting. I'll update this post if I figure something out...

  • Arknev's avatar
    Arknev
    Copper Contributor
    Oct 03, 2019

    joneirik I'm have the same issue. My formatting was working until a couple of days ago. I also have float:left

     

      "rowFormatter": {
    "elmType": "div",
    "style": {
      "float": "left",
      "display": "flex",
      "flex-wrap": "wrap",
      "flex-direction": "column",
      "align-items": "center",
      "justify-content": "space-around",
      "width": "160px",
      "height": "160px",
      "border-radius": "4px",
      "margin-right": "20px",
      "margin-bottom": "20px",
      "box-shadow": "0px 6px 17px -5px darkgrey"
    },

Resources