-
Notifications
You must be signed in to change notification settings - Fork 841
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
[EuiBasicTable] Fix limited expandable row height #3855
Conversation
Preview documentation changes for this PR: https://eui.elastic.co/pr_3855/ |
2 similar comments
Preview documentation changes for this PR: https://eui.elastic.co/pr_3855/ |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3855/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🥇 Nice solution and thanks for the catch on this one.
This does cause a bit of an animation jank if the content reaches the 1000px
height mark and then it's not longer a smooth animation to get to it's full height, but I think that's ok and hardly that noticeable with such a large max-height.
I did have a suggestion though to make that "jank" less visible which is to set the valued max-height
to 100vh
which should mean that the jank doesn't happen until the content is so tall it can't fit the full viewport height. Also, I think we can get even close to the 100% mark by changing 90%
to 99%
. I forked your original codesandbox with this solution and it seems to work well: https://codesandbox.io/s/nested-table-bug-forked-z232s
I also checked the browser support fo max-content
and it looks good with only IE not supporting it which we basically just dropped support for anyway 👍
I updated your PR summary's checklist with items that need to be done to finish this PR up. Basically, it just really needs to be tested in a couple other browsers and a Changelog item added.
Preview documentation changes for this PR: https://eui.elastic.co/pr_3855/ |
Thanks @cchaos , I have added an entry to CHANGELOG, and tried your sandbox on Firefox 79 (Linux) and Android. I do not have access to Safari. |
Looks like you might not have pushed you change to the Changelog? |
@cchaos dope, thx, silly me, pushed it to my own repo instead of origin. Fixed and merged from master. |
In some cases max-height of a sub-row needs to be more than 1000px. I tried setting `max-height: max-content`, but the expansion animation was not smooth, so instead added a two step animation -- to 1000px at 90%, and to `max-content` at 100%. Fixes #3854
Thanks @cchaos , awesome suggestion! Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
Preview documentation changes for this PR: https://eui.elastic.co/pr_3855/ |
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
Sigh, seems like pretty soon both FF and safari will disappear due to all these incompatibilities... And chrome will be renamed into IE13 :). Thanks for catching it! |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3855/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 Tested in Safari, Firefox, and Chrome. Nothing changes if the content is still smaller than the 100vh
, but this is also a good solution if the consumer provides their own max-height for overflow too.
Summary
In some cases the max-height of a table row needs to be more than 1000px when expanded - for example when the table contains a large sub-table. I tried setting
100% { max-height: max-content}
, but the expansion animation was not smooth, so instead added a two step animation -- to 1000px at 90%, and tomax-content
at 100%. I do not know ifmax-content
is the right choice here, not an expert TBH.Fixes #3854
Checklist
[ ] Check against all themes for compatibility in both light and dark modes[ ] Props have proper autodocs[ ] Added documentation[ ] Checked Code Sandbox works for the any docs examples[ ] Added or updated jest tests[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes