Comments (7)
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?
from list-formatting.
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.
from list-formatting.
sorry for the close/reopen mess, I'm new to github and the Close and comment button confused me...
from list-formatting.
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?
from list-formatting.
@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!
from list-formatting.
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
from list-formatting.
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(
}
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.
from list-formatting.
Related Issues (20)
- Sample - yesno-icon-color not working as intended HOT 5
- I have a question about honeycomb-link when used with an embedded webpart HOT 2
- I have a question about formatting a column that contains a JSON string HOT 2
- I have a question about JSON code in lists HOT 2
- Generic Gantt chart - Date field cannot be edited HOT 6
- Birthday Sample, does not populate birthday. HOT 5
- No longer works as it used to: form-samples/wrapped-body HOT 2
- Gallery View: Scaling of SVG files HOT 1
- honeycomb SAMPLE has made me sad, please help HOT 6
- Changes made by GENERIC-UPDATE-BUTTON are not immediately visible to other users HOT 2
- group-header-remove-column-name-clickable has made me sad, please help HOT 5
- Links do not open in Microsoft Lists App in some samples HOT 7
- I have a question about Praise Cards HOT 3
- Remove 'Editing' Worry From 'Custom Charts' - view-samples/custom-charts HOT 1
- group-header-remove-column-name has made me sad, please help HOT 4
- text-qrcode question/help HOT 5
- View Formatting - Group - GroupProps To Trigger Expand / Contract Without Malforming Header HOT 5
- Birthday Sample List formatting not working with @now HOT 1
- [SUGGESTION] Color Picker Potential HOT 5
- Colorful Honeycomb Links HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from list-formatting.