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.

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.

[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.

[AJIXuMuK]

v2.5.0 has been released.