Grid Layout Compact mode display issues

[lenain71]

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)

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

@hugoabernier - do you want to take a look?

[balacbe1990]

Am also facing same issue only for compact layout - it always display only 3 items

[lenain71]

@hugoabernier can you confirm the bug ? can we evaluate a estimation date for the possible resolution ? Have you maybe a workaround?

[Marlen-Jacob]

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

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]

It is still there is v3.18.1. Did anyone ever find a workaround in the last 3 years?

[IRRDC]

My suggestion to finally fix the issue: #1851