github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-03 08:13:14 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Dropdowns: Fixed bad direction logic, added dynmaic height

Browse Source 
Changes since adding notifications would cause direction to be assessed
upon max height of 80vh, which caused large dropdowns like the audit log
dropdown to drop up and/or go offscreen.
This restores the default assessment of 500px, and adds dynamic
max-height adjustment to provide more room for large dropdowns.

For #4652
This commit is contained in:
Dan Brown
2023-11-07 15:07:11 +00:00
parent ea0469e61a
commit fa6ac211b6
3 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/dropdown.js
View File

@ -34,6 +34,7 @@ export class Dropdown extends Component {
let heightOffset = 0;
const toggleHeight = this.toggle.getBoundingClientRect().height;
const dropUpwards = menuOriginalRect.bottom > window.innerHeight;
const containerRect = this.container.getBoundingClientRect();
// If enabled, Move to body to prevent being trapped within scrollable sections
if (this.moveMenu) {
@ -52,9 +53,13 @@ export class Dropdown extends Component {
if (dropUpwards) {
this.menu.style.top = 'initial';
this.menu.style.bottom = `${heightOffset}px`;
const maxHeight = (window.innerHeight - 40) - (window.innerHeight - containerRect.bottom);
this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;
} else {
this.menu.style.top = `${heightOffset}px`;
this.menu.style.bottom = 'initial';
const maxHeight = (window.innerHeight - 40) - containerRect.top;
this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;
}
// Set listener to hide on mouse leave or window click
@ -91,6 +96,7 @@ export class Dropdown extends Component {
this.toggle.setAttribute('aria-expanded', 'false');
this.menu.style.top = '';
this.menu.style.bottom = '';
this.menu.style.maxHeight = '';
if (this.moveMenu) {
this.menu.style.position = '';