Elements in a list are not showing after applying custom formatting

[joneirik]

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 correctly, however, only a very small subset of the items are shown (10 when the list contains ~300 items). The view is also set to display ~60 elements pr page.

What are some possible issues? I closely recreated the list in another SharePoint environment, but the error does not happen there. 

Similar issue to: https://techcommunity.microsoft.com/t5/SharePoint/SharePoint-modern-list-view-not-displaying-items/m...)

[#2]

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

[#3]

@Norman Young 

Thanks for the reply. I gave up using the list view, and used the tiles instead formatting things using the tileProps value. This allowed me to show as many elements as I would like. 

The issue with the formatting persisted even when it only contained a simple div, so I doubt it's the issue

[#4]

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

[#5]

@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"
    },

[#6]

@Norman Young There's something buggy in the code, that's for sure.

I was doing the same thing, creating some flex boxes to do tiling. When I previewed the formatting code, it showed all my items nicely tiled, and showed all of them. When I saved the formatting code it still showed all the items. When I refreshed the page it only showed the first 10 items. 

This was only if I set the flex direction to 'row' - putting it to 'column' was OK.

Or, if not using flex, setting the "hideColumnHeader" to false forced items back to one per row and that worked.

[#7]

@Robin Nilsson I've tried all of these and still have the issue. However, I was doing some additional testing, and for my formatting, if the list has a total of 30 items, everything works as expected, regardless of paging. If the list has 31 or more items, this issue presents itself and only 10 are displayed. Furthermore, I was on a slow machine yesterday and could see all the items load and then quickly disappear. Checking the DOM I could see that they were removed. This happened every time the page loaded.

[#8]

@Arknev My solution in the end was to create a PowerApp with a gallery and some search/filter functionality. Not ideal in every case maybe, but works fine in my case. At least I'm able to display all ~1400 elements.