ProcessPageLister CSS causes unwanted scrollbar

[Toutouwai]

Short description of the issue

I'm using ListerPro here as a convenient way of adding modal editing to pages in Lister, but the problem is with CSS in the core ProcessPageLister.

I have filters set to show pages where there is 1 item in the image field.

I open one of the pages for modal editing and delete the image, so the page no longer matches the filter and automatically drops out of the Lister results. This causes an unnecessary and unwanted scrollbar in the results table.

This is caused by this rule in the ProcessPageLister CSS.

No overflow rule should be needed for this div, as by default it will expand and contract to fit its contents. Removing the overflow rule fixes the problem.

Setup/Environment

• ProcessWire version: 3.0.241

[ryancramerdesign]

@Toutouwai If I recall, that overflow-x was necessary when the table could not horizontally physically fit in the viewport. So the rule would make just the table horizontally scrollable, rather than the entire page. I'm not sure why it's causing a vertical scrollbar, but maybe adding an overflow-y:visible rule would be an alternative?

[Toutouwai]

maybe adding an overflow-y:visible rule would be an alternative?

It would be great if that worked but unfortunately it doesn't: https://stackoverflow.com/a/6433475/1036672

I think I'll just override the overflow in custom CSS because the unwanted vertical scrollbar affects my clients more often than the lack of a horizontal scrollbar (and you can use the window scrollbar to reveal any horizontal overflow anyway). But other PW users may not feel the same so perhaps best to leave the core as it is.

[Toutouwai]

Actually, the unwanted scrollbar disappears as soon as there is a window resize, as presumably this forces the browser to recalculate the div dimensions and it realises that there is no vertically overflowing content.

So could we add this line after line 309 in ProcessLister.js?

window.dispatchEvent(new Event('resize'));

For me this resolves the issue.

[ryancramerdesign]

Thanks @Toutouwai I have added your suggested fix for this.