starred/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2026-02-06 00:59:39 +03:00
Code Issues 784 Packages Projects Releases 10 Wiki Activity

lack of scroll bar in attachment section #3291

New Issue
Closed
opened 2026-02-05 06:15:59 +03:00 by OVERLORD · 5 comments
OVERLORD commented 2026-02-05 06:15:59 +03:00
Owner
Copy Link

Originally created by @sdhadi on GitHub (Oct 19, 2022).

Describe the Bug

When a page's attachments go beyond the preview limit of the page, there isn't any scroll bar to navigate between them.
Of course, by using the mouse wheel, it's possible to show lower items in the list, but some users may not have a mouse wheel.
This issue came from our users who have encountered this problem.

Steps to Reproduce

  1. Upload too many items in attachment section of a page. (the exact number of attachments to reproduce the problem is relative because it depends on the dimensions of the screen)
  2. Save page.
  3. Now in the attachment section of the page, scrolling in list is just available by mouse wheel and there is not any scroll bar next to the list.

Expected Behaviour

A scroll bar next to attachment section in long lists or a drop down extendable list (I'm not sure about the exact technical term of it) can resolve it.

Screenshots or Additional Context

No response

Browser Details

No response

Exact BookStack Version

v22.09

PHP Version

No response

Hosting Environment

Ubuntu 22.04

Originally created by @sdhadi on GitHub (Oct 19, 2022). ### Describe the Bug When a page's attachments go beyond the preview limit of the page, there isn't any scroll bar to navigate between them. Of course, by using the mouse wheel, it's possible to show lower items in the list, but some users may not have a mouse wheel. This issue came from our users who have encountered this problem. ### Steps to Reproduce 1. Upload too many items in attachment section of a page. (the exact number of attachments to reproduce the problem is relative because it depends on the dimensions of the screen) 2. Save page. 3. Now in the attachment section of the page, scrolling in list is just available by mouse wheel and there is not any scroll bar next to the list. ### Expected Behaviour A scroll bar next to attachment section in long lists or a drop down extendable list (I'm not sure about the exact technical term of it) can resolve it. ### Screenshots or Additional Context _No response_ ### Browser Details _No response_ ### Exact BookStack Version v22.09 ### PHP Version _No response_ ### Hosting Environment Ubuntu 22.04
OVERLORD added the 🐛 Bug label 2026-02-05 06:15:59 +03:00
OVERLORD commented 2026-02-05 06:16:03 +03:00
Author
Owner
Copy Link

@sdhadi commented on GitHub (Oct 19, 2022):

I wasn't sure this issue should be considered as a bug or a feature request. Because it's lack of a necessary feature I raised it as a Bug.

@sdhadi commented on GitHub (Oct 19, 2022): I wasn't sure this issue should be considered as a bug or a feature request. Because it's lack of a necessary feature I raised it as a Bug.
OVERLORD commented 2026-02-05 06:16:10 +03:00
Author
Owner
Copy Link

@ssddanbrown commented on GitHub (Oct 20, 2022):

Hi @sdhadi, Thanks for raising.
This isn't something specific to attachments, this is relevant to all content in sidebars within views that follow the three column layout.

but some users may not have a mouse wheel

  • Was this the actual real case in your scenario or is that theoretical or an assumption of possibility?
    • If a real case, does such a user only ever scroll via clicking and dragging scrollbars?

Just want to understand the actual real-world scenario since our layout has long since had this behaviour without reported issue.

@ssddanbrown commented on GitHub (Oct 20, 2022): Hi @sdhadi, Thanks for raising. This isn't something specific to attachments, this is relevant to all content in sidebars within views that follow the three column layout. > but some users may not have a mouse wheel - Was this the actual real case in your scenario or is that theoretical or an assumption of possibility? - If a real case, does such a user only ever scroll via clicking and dragging scrollbars? Just want to understand the actual real-world scenario since our layout has long since had this behaviour without reported issue.
OVERLORD commented 2026-02-05 06:16:13 +03:00
Author
Owner
Copy Link

@sdhadi commented on GitHub (Oct 22, 2022):

Hi @ssddanbrown
In the of real scenario, Yes. I had a referral from a user that uploaded many files as attachments to a page (was his real need) and complained about not accessing all of them in the attachment section. As you said, this is also relevant to page navigation and book navigation sections. When this problem came up, I unconsciously used my mouse wheel .But it's comprehensible that average users didn't know about this simple thing. It's especially more problematic for these users when they use laptops and don't know how to scroll with two fingers on touchpads. 😞😵‍💫
Thank you

@sdhadi commented on GitHub (Oct 22, 2022): Hi @ssddanbrown In the of real scenario, Yes. I had a referral from a user that uploaded many files as attachments to a page (was his real need) and complained about not accessing all of them in the attachment section. As you said, this is also relevant to page navigation and book navigation sections. When this problem came up, I unconsciously used my mouse wheel .But it's comprehensible that average users didn't know about this simple thing. It's especially more problematic for these users when they use laptops and don't know how to scroll with two fingers on touchpads. 😞😵‍💫 Thank you
OVERLORD commented 2026-02-05 06:16:21 +03:00
Author
Owner
Copy Link

@ssddanbrown commented on GitHub (Nov 4, 2022):

Alright, I can't assure scrollbars will always be shown to users. On some browsers scrollbars would even hide by default until certain actions take place. Plus showing scrollbars for these sections adds design challenges and complications.
Overall though, this is a one-off report for a design we've had for at least 3 years, so I don't think it's worth us making changes to address this need based on the current value/concern.

If you'd like to show scrollbars for a single instance you could add the following to the "Custom HTML Head Content" customization setting:

<style type="text/css">
	.tri-layout-left-contents::-webkit-scrollbar,
	.tri-layout-right-contents::-webkit-scrollbar
	{
	all:unset;
	}

	.tri-layout-left-contents::-webkit-scrollbar-button,
	.tri-layout-right-contents::-webkit-scrollbar-button
	{
	display:block;
	background-color:ButtonFace;
	box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
	height: auto;
	width: initial;
	background-position: center 5px;
	background-size:9px 7px;
	image-rendering: pixelated;
	background-repeat:no-repeat;
	}

	.tri-layout-left-contents::-webkit-scrollbar-button:hover,
	.tri-layout-right-contents::-webkit-scrollbar-button:hover
	{
	box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
	}

	.tri-layout-left-contents::-webkit-scrollbar-button:active,
	.tri-layout-right-contents::-webkit-scrollbar-button:active
	{
	box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
	}

	.tri-layout-left-contents::-webkit-scrollbar-button:vertical:start:increment,
	.tri-layout-right-contents::-webkit-scrollbar-button:vertical:start:increment,
	.tri-layout-left-contents::-webkit-scrollbar-button:vertical:end:decrement,
	.tri-layout-right-contents::-webkit-scrollbar-button:vertical:end:decrement
	{
	display:none;
	}

	.tri-layout-left-contents::-webkit-scrollbar-button:vertical:decrement,
	.tri-layout-right-contents::-webkit-scrollbar-button:vertical:decrement
	{
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='50,00 0,50 100,50'/></svg>");
	}

	.tri-layout-left-contents::-webkit-scrollbar-button:vertical:increment,
	.tri-layout-right-contents::-webkit-scrollbar-button:vertical:increment
	{
	background-position: center 6px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='0,0 100,0 50,50'/></svg>");
	}

	.tri-layout-left-contents::-webkit-scrollbar-thumb,
	.tri-layout-right-contents::-webkit-scrollbar-thumb
	{
	background-color:ButtonFace;
	box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.3);
	border-left:2px solid rgba(255,255,255,0.3);
	border-right:2px solid rgba(255,255,255,0.3);
	}

	.tri-layout-left-contents::-webkit-scrollbar-thumb:hover,
	.tri-layout-right-contents::-webkit-scrollbar-thumb:hover
	{
	box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
	}

	.tri-layout-left-contents::-webkit-scrollbar-thumb:active,
	.tri-layout-right-contents::-webkit-scrollbar-thumb:active
	{
	box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
	}

	.tri-layout-left-contents::-webkit-scrollbar-track,
	.tri-layout-right-contents::-webkit-scrollbar-track
	{
	background-color:ButtonFace;
	box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
	}
.tri-layout-left-contents,
.tri-layout-right-contents {
	scrollbar-width:  initial !important;
overflow-y: auto;
}
</style>

Unfortunately it takes quite a lot of CSS due lacking CSS support in chrome/safari browsers, requiring re-creation of scrollbars in those browsers. This may have other affects, and is an unsupported CSS tweak that may break upon future updates.

@ssddanbrown commented on GitHub (Nov 4, 2022): Alright, I can't assure scrollbars will always be shown to users. On some browsers scrollbars would even hide by default until certain actions take place. Plus showing scrollbars for these sections adds design challenges and complications. Overall though, this is a one-off report for a design we've had for at least 3 years, so I don't think it's worth us making changes to address this need based on the current value/concern. If you'd like to show scrollbars for a single instance you could add the following to the "Custom HTML Head Content" customization setting: ```html <style type="text/css"> .tri-layout-left-contents::-webkit-scrollbar, .tri-layout-right-contents::-webkit-scrollbar { all:unset; } .tri-layout-left-contents::-webkit-scrollbar-button, .tri-layout-right-contents::-webkit-scrollbar-button { display:block; background-color:ButtonFace; box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3); height: auto; width: initial; background-position: center 5px; background-size:9px 7px; image-rendering: pixelated; background-repeat:no-repeat; } .tri-layout-left-contents::-webkit-scrollbar-button:hover, .tri-layout-right-contents::-webkit-scrollbar-button:hover { box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5); } .tri-layout-left-contents::-webkit-scrollbar-button:active, .tri-layout-right-contents::-webkit-scrollbar-button:active { box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7); } .tri-layout-left-contents::-webkit-scrollbar-button:vertical:start:increment, .tri-layout-right-contents::-webkit-scrollbar-button:vertical:start:increment, .tri-layout-left-contents::-webkit-scrollbar-button:vertical:end:decrement, .tri-layout-right-contents::-webkit-scrollbar-button:vertical:end:decrement { display:none; } .tri-layout-left-contents::-webkit-scrollbar-button:vertical:decrement, .tri-layout-right-contents::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='50,00 0,50 100,50'/></svg>"); } .tri-layout-left-contents::-webkit-scrollbar-button:vertical:increment, .tri-layout-right-contents::-webkit-scrollbar-button:vertical:increment { background-position: center 6px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='0,0 100,0 50,50'/></svg>"); } .tri-layout-left-contents::-webkit-scrollbar-thumb, .tri-layout-right-contents::-webkit-scrollbar-thumb { background-color:ButtonFace; box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.3); border-left:2px solid rgba(255,255,255,0.3); border-right:2px solid rgba(255,255,255,0.3); } .tri-layout-left-contents::-webkit-scrollbar-thumb:hover, .tri-layout-right-contents::-webkit-scrollbar-thumb:hover { box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5); } .tri-layout-left-contents::-webkit-scrollbar-thumb:active, .tri-layout-right-contents::-webkit-scrollbar-thumb:active { box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7); } .tri-layout-left-contents::-webkit-scrollbar-track, .tri-layout-right-contents::-webkit-scrollbar-track { background-color:ButtonFace; box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3); } .tri-layout-left-contents, .tri-layout-right-contents { scrollbar-width: initial !important; overflow-y: auto; } </style> ``` Unfortunately it takes quite a lot of CSS due lacking CSS support in chrome/safari browsers, requiring re-creation of scrollbars in those browsers. This may have other affects, and is an unsupported CSS tweak that may break upon future updates.
OVERLORD commented 2026-02-05 06:16:25 +03:00
Author
Owner
Copy Link

@sdhadi commented on GitHub (Nov 6, 2022):

Dear @ssddanbrown
Thank you for your support and this solution works very well.
It is very satisfying to see that you are so persistent and responsive to users.

@sdhadi commented on GitHub (Nov 6, 2022): Dear @ssddanbrown Thank you for your support and this solution works very well. It is very satisfying to see that you are so persistent and responsive to users.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
🎨 Design
📖 Docs Update
🐛 Bug
🐛 Bug
:cat2:🐈 Possible duplicate
💿 Database
☕ Open to discussion
💻 Front-End
🐕 Support
🚪 Authentication
🌍 Translations
🔌 API Task
🏭 Back-End
⛲ Upstream
🔨 Feature Request
🛠️ Enhancement
🛠️ Enhancement
🛠️ Enhancement
❤️ Happy feedback
🔒 Security
🔍 Pending Validation
💆 UX
📝 WYSIWYG Editor
🌔 Out of scope
🔩 API Request
:octocat: Admin/Meta
🖌️ View Customization
❓ Question
🚀 Priority
🛡️ Blocked
🚚 Export System
♿ A11y
🔧 Maintenance
> Markdown Editor
pull-request
Mirrored from GitHub Pull Request
No Label 🐛 Bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#3291
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?