fix(dropdowns): stop menus and pickers clipping in tables - #947
Merged
Merged
Conversation
- Actions menus render in body and use ngbDropdownItem - Datepickers and ng-selects attach to body so .bottom-container no longer clips them - Global NgbDropdownConfig adds popper hide modifier; CSS hides a menu whose toggle scrolled out of view - Drop unused bootstrap.min.js from angular.json
danieltruong
requested review from
Ckoelewyn,
tolkamps1 and
tom0827
as code owners
September 24, 2026 21:53
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Menus, date pickers and select lists inside
.bottom-containerwere cut off, because that container hasoverflow: hidden.document.body. Their items usengbDropdownItem, so arrow keys move between them. Upload Document(s) is a plain link instead of a button inside a link.container="body"and ng-selects useappendTo="body"on project documents, document edit and document upload.NgbDropdownConfigadds popper'shidemodifier. With the CSS rule[data-popper-reference-hidden] { visibility: hidden }, a menu hides once its toggle scrolls under the fixed header, instead of painting over it.bootstrap.min.jsis removed fromangular.json. It was Bootstrap 5 JS, which ignores the Bootstrap 4data-toggleattributes this app uses, so it did nothing. It also threw an error on arrow keys in menus, which happens in prod today.popper.min.jsis still loaded as a global script. Nothing needs it now; removing it is a follow-up.The eagle-helper-pods functional test selector
.upload-docs #button-d(ProjectDocumentsPage.groovy:21) was already broken before this change.Tests: specs for the project documents Actions menu (in body, link target, arrow keys) and for the hide modifier.