Problem: I have a project that is configured to scale to fit the window and the project does this fine with the exception of the dropdown list.
Is there a way to limit the scope of the dropdown box to the height of the project so that it does not extend beyond the window?
ActivePresenter version: 9.1.2
OS: Win 11
Notes:
As far as I know, there is no way to apply scroll + max-height to a native <select>. You can, however, control the number of visible options on open using the size parameter in JS:
const selects = document.querySelectorAll(".ap-select");
selects.forEach(sel => {
sel.addEventListener("focus", () => sel.size = 5);
sel.addEventListener("blur", () => sel.size = 1);
sel.addEventListener("change", () => { sel.size = 1; sel.blur(); });
});
This will limit the number of visible options when the dropdown is opened.
I am good with the idea of reducing the number of visible items in the drop down.
I believe this would also solve the issue.
Unfortunately, this solution did not play out as expected.
The box is shifted such that the top few items are not visible, it becomes resized in an odd way, and the drop down no longer expands and contracts at all.
I dug into this further and even prepared a small sample project to verify the behavior.
The main issue here is that the dropdown of a native <select> element is not actually part of the DOM in the same way as other elements — it’s rendered by the browser/OS as a “chrome UI”. That means we don’t really have control over its size, position, or styling beyond a very limited set of attributes. Things like max-height or overflow-y: scroll simply won’t apply.
That’s also why the workaround with size behaves oddly: once you manipulate the size property, the element effectively switches into a “listbox” mode, which can lead to strange shifts, incomplete rendering, and it no longer expands/collapses like a normal dropdown.
Because of this limitation, the only reliable way to constrain the dropdown’s height to the project window is to implement a custom dropdown instead of relying on the native <select>. This can be done either by:
building your own dropdown using <div> + <ul> and some JavaScript, so you can apply max-height and scrolling, or
In short: with the native <select>, it’s not possible to fully control the dropdown height and prevent it from overflowing the window. A custom dropdown is the only way to achieve that.
I’ve also attached a sample project with a custom dropdown implementation.
It might be useful as a reference.
I couldn’t solve this issue with the native <select> either, so I’ve been using this kind of custom approach as a workaround.
CustomDropdown.approj (228 KB)
