View with row formatter emulating tiles behaves incorrectly on paged list

[gandalf516]

Category

• Question
• Bug
• Enhancement

Expected or Desired Behavior

All items fetched in background when scrolling through paged list content in new experience should appear and json format be applied to them

Observed Behavior

With certain page sizes (set via Item limit in list settings) it either showed just first n items and no control to fetch more or it showed first n items, fetched even some more, showing the "Tap to get more items / Searching next 5k items", but when I scrolled certain number of times, the scrollbar jumped right to the beginning and did that whenever I tried to get to the rest of the list items. This was consistent across browsers, on win pc and android phone.

Steps to Reproduce

1. Set up list in new experience with Item limit 10 and say 100+ items to see the dynamic paging. In my case I have 470 items and tried Item limit from 1 to 30 with no luck.
2. Make its view json formatted using row formatter - I used the modified generic tile view sample from this repository.
3. Scroll the tiles to get to the end of the list

[thechriskent]

Unfortunately, I'm unable to recreate this issue.

Are you seeing paging issues when not using this format or are the issues only occurring when the view format is applied?

[gandalf516]

I'm seeing this issue only with the view format applied (even with the original view format sample). The same approach (generating clickable tiles from view data) works just fine when used as a column format (no paging issues at all). Paging also works as expected on the same view without the view format applied.

Also, when I set the total item limit to 1000 instead of paging, I only see the first few items with the view format, while I can see all items without it.

Could you try it also with the view format linked above?

Also, what browser and view paging config did you tried it with? I'm seeing the issue in Chrome/IE 11 on win 7.

[gandalf516]

sorry for the close/reopen mess, I'm new to github and the Close and comment button confused me...

[gandalf516]

Update: when I remove the float:left style, so it renders one item per row and not n items in single row, it works fine with paging.

Did you mean it actually worked in your setup with tiles renders in single row and dynamic paging on new experience view page?

[thechriskent]

@gandalf516 Thanks for adding the additional detail! I am definitely able to recreate this now. I had to add 100+ items before I began to see this:

The issue is appearing whenever the format causes the rows to be on the same line. This is what the float:left is doing. This is allowed for formats so the issue appears to be with however modern listview paging is handled.

Unfortunately, this issues list is just for the samples and likely won't be seen by the right people to help fix the underlying issue. Please open an issue on the primary issues list. Feel free to link back to this issue for context. This is a great find, but we need Microsoft Engineers to see it.

For now, I'm going to close the issue since it's not a problem with the samples themselves. Please feel free to reopen if you disagree. Thanks!

[eschrader]

Same issue, I have a list with a ton of items in it. I used this JSON template with just $Title everywhere. https://github.com/SharePoint/sp-dev-list-formatting/issues All of the items load (see right scroll bar) but then on like document ready the scroll bar squishes and all the items go away except for 10 and the message gets appended that says "You've found all of the items in this view". If I set float to "none" instead of "left" on the first element they all load and stay loaded.
"float": "none"

I also tried adding a DOM inline <style type="text/css">.float {float:left}</style> and adding the float classname to the first element. The scrollbar stays long but as soon as you scroll the items after 10 go blank and the page flashes and displas the found all items message.

Seems like MS did this intentionally?

I cannot find any JSON view formatting example where items are on the same row that does not use float: left. I tried flex but cannot control the parent container on my rows. We cannot use tables since we cant edit the parent. There is no other way to have items on the same line, my hands are tied. https://www.w3schools.com/html/html_layout.asp

[eschrader]

In the DOM, I can see .ms-List-page writing the parent container for each 10 items. However, the first element cannot be a float left.

I created a hack but it still has missing floats every 10 items if you dont have a number of columns evenly divisible by 10

In a SPFX extension, add some inline CSS to make this parent container display using the flex attribute value.

let url: string = window.location.href; url = url.toLowerCase(); if (url.indexOf("https://yourtenant.sharepoint.com/sites/intranet/subsite/lists/baseballcardslist/allitems.aspx") > -1) { $('.StandaloneList-header').after(

<style type="text/css">.ms-List-page { display: flex; flex-wrap: wrap; } </style>`);

  }
  else {
    //do nothing
  }`

Then in my JSON I removed float from the parent element (children can use it as needed). My children have a defined height/width to make the cards stack.
{ "schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "hideSelection": "false", "hideColumnHeader": "false", "rowFormatter": { "elmType": "div", "style": { "font-size": "14px", "padding-bottom": "20px" }, "attributes": { "class": "ms-fontColor-white--hover" }, ...

There is no float on the first style, so it loads all 80 of my items.

Again, the paging Div doesn't wrap evenly since the parent is a container, so each row resets at the OOTB 10 paging value even if my list view returns all 100 items.