From 099a16c5b40644856822e09a054b026ceb187d93 Mon Sep 17 00:00:00 2001 From: ivk Date: Thu, 14 Nov 2024 13:48:38 +0100 Subject: [PATCH] Fix dropdown not scrolling when there's not enough vertical space The inner dropdown container was overflowing the outer one instead of scrolling because its height was not restricted. This could be reproduced on a screen that's not tall enough e.g. small mobile screen or landscape orientation of the phone. Now we set the height to the one of the parent to always have correct height. Close #7937 --- src/common/gui/base/Dropdown.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/common/gui/base/Dropdown.ts b/src/common/gui/base/Dropdown.ts index 31078adb731..46bc5e23169 100644 --- a/src/common/gui/base/Dropdown.ts +++ b/src/common/gui/base/Dropdown.ts @@ -159,8 +159,10 @@ export class Dropdown implements ModalComponent { const contents = () => { const showingIcons = this.children.some((c) => "icon" in c && typeof c.icon !== "undefined") + // We need to set the height to the height of the parent which already has the calculated and measured height, otherwise this element might + // overflow the parent (the overall dropdown container) when there's not enough vertical space to display all items return m( - ".dropdown-content.scroll", + ".dropdown-content.scroll.height-100p", { class: this.isFilterable ? "abs" : "", role: AriaRole.Menu,