Attachments not scrollable when overflowing the container

[thescottyq]

We have a couple of pages that have a long list of attachments and when you view the attachments list in edit mode it prevents the whole page from scrolling. This effects Chromium, FireFox and Opera on a Windows PC, however works intermittently on Safari on both Mac and iPadOS

You can fix this by manually editing the raw HTML within the browsers “inspector” mode and adding the following style to the DIV which is component=“sortable list”

style="overflow-y:scroll;height:100vh"

A simple fix for this would seem to be to add this CSS to the customer header option within the GUI however we cannot seem to find a way to select that component in CSS.

Has anyone else encountered this and know of a suitable permanent fix please?

[JamesTimmins-ops]

this can be edited at /var/www/bookstack/resources/views/attachments/manager-list.blade.php open a text editor for it (nano or vi) then add style="overflow-y:scroll;height:850vh;" to the component="sortable-list"

the div will look like this:

div component="sortable-list" option:sortable-list:handle-selector=".handle" style="overflow-y:scroll;height:850vh;"

[thescottyq]

Cheers @JamesTimmins-ops

Could this be pushed out to live repo please guys?

[ssddanbrown]

Note: You can use the visual theme system to implement the @JamesTimmins-ops solution without editing core files.

Alternatively, Something like below should work in custom HTML head:

<style>
.floating-toolbox .files div[component="sortable-list"] {
   overflow-y:scroll
   height:100vh;
}
</style>

Otherwise, Have assigned to the next feature release.

Note: The implementation solution will ideally need to be flexible instead of using fixed #vh units.

[ssddanbrown]

Hi @thescottyq,

Just coming to look at this one, but I have not been able to find an issue. Have tested on Firefox and Chrome on Fedora, In addition to Safari on iPad. In each, the I'm able to scroll the attachments sidebar while still being able to scroll page content as expected.

In regards to your comment:

when you view the attachments list in edit mode it prevents the whole page from scrolling

What do you mean by page? As in the page content within the editor? If so, which editor are you using? This view has a full-height flexible layout where the webpage itself does not usually scroll.

[thescottyq]

Hi Dan, thanks for looking at this further. To confirm your suggestion of adding the following to our customer header resolved the issue.

<style>
.floating-toolbox .files div[component="sortable-list"] {
overflow-y:scroll
height:100vh;
}
</style>

The issue only seems to be on Windows Machines and is specifically when you are editing a page. If you have a long list of attachments the list just does not scroll

[ssddanbrown]

Tested this again across Firefox and Chrome/Edge across Fedora Linux and Windows 10, cannot reproduce, so will therefore close this off as I can only assume something else is at play.
Happy to address if a specific issue can be found but I'd need to be able to reproduce the scenario as to not be blindly applying fixes.