We got a list of cards that show a small part of a textbox. That textbox is limited in height via CSS. When a user clicks on "Details" the textboxes height is changed via javascript to the real height of the content. The problem is, that when the viewport / window is scrolled and the cards height increases, it pushes itself out of the viewport. When the window is not scrolled at all, it works.
Please see the following video: https://monosnap.com/file/HauaJrJlkx2MBLGt3QOa5ulJMxFTnv
0:00 -> 0:08 is the desired opening / closing behavior that I want
0:09 -> 0:16 is the behavior I do not want, as the top text is moved out of the viewport.
Is there a way to keep the viewport, preferably without JS?
Edit: This happens only in Chrome (84.0.41), in Firefox and Safari it works as expected.
I can send you a link to the staging environment if necessary, please contact me via [email protected]
Looks it's done more logical that you want to be. As control placed in a bottom element (bad UI) better keep this control in viewport (strange that chest Crome thinks so).
So just display:flex build all this magic :)
Please look examples https://drive.google.com/file/d/1faTDwJBQEv-V96O8-HC-8R2_hXkGzsQJ/view?usp=sharing
UPDATE: also please remove
tabindex="0"
And use button instead div to get the same logic with the keyboard navigation.
On Video last Chrome Google Chrome is up to date Version 84.0.4147.89 (Official Build) (64-bit)