Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix height jumping and sizing of Modals with Tables (file lists) in them #3022

Closed
lyzadanger opened this issue Jul 30, 2021 · 1 comment · Fixed by #3084
Closed

Fix height jumping and sizing of Modals with Tables (file lists) in them #3022

lyzadanger opened this issue Jul 30, 2021 · 1 comment · Fixed by #3084
Assignees
Labels

Comments

@lyzadanger
Copy link
Contributor

lyzadanger commented Jul 30, 2021

As you can see in this screen video of the new files-with-subfolders interface, the modal height jumps around as different file sets are loaded.

poc-ready-for-cleanup

We've struggled with modal heights for some time, and have introduced some specific fixes in various parts of the LMS application. Lately, we introduced a new shared Modal component that can impose some height and overflow controls. That would work well here, but before it can, the Table component needs some adjustments to be able to behave correctly in this variant of Modal.

Once the shared Table component is available, use it within the shared Dialog component in these contexts to rectify Modal-height flailing.

Depends on hypothesis/frontend-shared#157

Part of #2943

@robertknight
Copy link
Member

One way I was able to achieve the desired behavior in prototyping some time ago was to use contain: size on the table content in browsers that support it. This tells the browser than the table should ignore its children when calculating its size and instead use an explicitly specified size as its preferred size, while still having the ability to shrink if needed. What I then did was set this explicit preferred size to be roughly N rows for some small value of N. Unfortunately Safari doesn't support CSS Containment, so we'll have to find another approach, or just have a fallback in place for Safari.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants