PnP ListView control - When the items reach the number of items more than can be shown on a page/component, it adds horizontal scroll instead of vertical.

[zenaidura]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Version: [1.19.0]

Expected / Desired Behavior / Question

When there is no room to show all items inside browser window, it should only add a vertical scrollbar. Horizontal scrollbar should only be visible when the list view cannot show all the columns in the browser window.

Observed Behavior

When the items reach the number of items more than can be shown on a page/component, it adds horizontal scroll instead of vertical.

Steps to Reproduce

Use a ListView control on the page:

<ListView
                  items={this.state.projectItems}
                  viewFields={viewFields}
                  compact={true}
                  selectionMode={SelectionMode.none}
                  showFilter={true}
                  defaultFilter=""
                  filterPlaceHolder="Search..."/>

Add a new item to the list dynamically that cannot be viewed in the browser window / parent component's height, or load the items more than that can be shown within the height of a parent div, it shows a horizontal bar.
Horizontal scroll should only appear based on current div's width which works fine.

The last column in the PnP listview control assumes the remaining width of the page or parents div and somehow miss-calculates in determining the width and height should be and show horizontal bar instead of vertical bar.

• Resizing the window, recalculates the height and width correctly.

• This bug occurs in Chrome and not in Edge.

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

[zenaidura]

Its been 9 days and sitting here without being assigned to anyone.

[AJIXuMuK]

@zenaidura - PnP Reusable controls is an open-source initiative. People work on the issues and improvements on their spare time.
That's why we don't have an SLA on fixing bugs.

We will definitely take a look at the issue.

[zenaidura]

I understand, I am swamped at developing the system and cant spare time either. Thats why I always am very detailed in the bug when I add them. Thanks

…

On Thu, Sep 10, 2020 at 11:20 AM Alex Terentiev ***@***.***> wrote: @zenaidura <https://github.com/zenaidura> - PnP Reusable controls is an open-source initiative. People work on the issues and improvements on their spare time. That's why we don't have an SLA on fixing bugs. We will definitely take a look at the issue. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#648 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACHEGA53Z6MAQYXGWGVFUM3SFD4GRANCNFSM4QSI2ZAA> .

-- Ashar Khan LinkedIn: http://linkedin.com/in/ashar Website: http://www.ashark.net

[AJIXuMuK]

Hi @zenaidura,

I got it fixed.
Most probably, you were providing empty items array first and then some loaded items. In that case the size of the header and size of the content were calculated separately.

So, first change is - now you can provide items as undefined to the control, no need to provide fake empty array.

But even if you do that, the control should correctly update itself when items are changed.

The fix will be included in the next release.

In a meanwhile you can test the functionality in beta version.

[AJIXuMuK]

v2.5.0 has been released.