ghost
commented
3 years ago Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.
Open lenain71 opened 3 years ago
ghost
commented
3 years ago Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.
AJIXuMuK
commented
3 years ago @hugoabernier - do you want to take a look?
balacbe1990
commented
3 years ago Am also facing same issue only for compact layout - it always display only 3 items
lenain71
commented
3 years ago @hugoabernier can you confirm the bug ? can we evaluate a estimation date for the possible resolution ? Have you maybe a workaround?
Marlen-Jacob
commented
3 years ago @hugoabernier I am facing the same issue - any news on this or a workaround how to use the grid layout on mobile devices? I figured out that all tiles are loading in compact mode when you turn the screen in landscape so that the non-compact mode is triggered once. But - this is not really a work around for customers 😅
PieterHeemeryck
commented
1 year ago I've also encountered this issue. "@pnp/sp": "2.8.0".
Business context: We rely on this component for an intranet that is about to go live in a couple of months for thousands of end users.
Similar to what @Marlen-Jacob describes: It looks like it happens when there is just a single column. Then I get a subset of data, namely three items. All data is there, but it is hidden / not shown because when I enlarge the viewport width in e.g. the chrome browser (no page reload), I see all items when it snaps to 2 columns. If I put the viewport back to just show a single column (still no page reload), all items are still shown. Whenever the screen is immediately big enough to show 2 columns of data, this issue does not appear.
I actually don't want to set the compact mode flag at all, but I'm having a hard time controlling its behavior. Scratch that, I just learned from the documentation that this is controlled by the PnP component itself:
On mobile devices and 1/3 column layouts, it will render a compact layout.
It appears it can't be related to my onRenderGridItem override, as @lenain71 has this issue (since quite a long time already) for the default render method...
Digging into the GridLayout code, I see that the scss has set the rowsPerPage to 3, and that when the screen is smaller than 480px, the column count is set to 1. Multiplying these passes along a total of 3 items to the list. I think this causes the issue. Not sure how to fix things from here. I can't quite get how this then works when the column count is not set to 1...
I also don't know if this issue is present or not in pnp v3.
@hugoabernier Sorry to bother you, but since you've been mentioned, do you have any pointers which I could look into? Can we fix this ourselves in the pnp repo in v2 still via a PR? Can we work around this problem in some way? Thanks for your feedback!
IRRDC
commented
4 months ago It is still there is v3.18.1. Did anyone ever find a workaround in the last 3 years?
IRRDC
commented
4 months ago My suggestion to finally fix the issue: https://github.com/pnp/sp-dev-fx-controls-react/pull/1851
Category
[ ] Enhancement
[ X] Bug
[ ] Question
Version
[ @pnp/spfx-controls-react": "^2.1.0" or @pnp/spfx-controls-react": "^2.4.0" ]
Expected / Desired Behavior / Question
SPFX application on sharePoint Online modern page : Display a gridLayout component with Office UI fabric DocumentCard in a compact mode with all loaded data.
Observed Behavior
Display a gridLayout component with Office UI fabric DocumentCard in a compact mode does not display the entire list of data. No scrolling bar are available and only 3 items are displayed. Tested on differents mobile devices. No issue when using the same component in normal mode.
Steps to Reproduce
Take exemple code from [https://pnp.github.io/sp-dev-fx-controls-react/controls/GridLayout/] and display component in compact mode (from mobile device)