Splitting the discussion from wikiViewer Problems:
I am trying to create
I have nearly managed this in two ways:
One using jQuery & CSS Grid:
The animation is pretty good on this one, (header shrinks and rows expand) but I can’t get the white space from the header to disappear, it seems the header is retaining its original size (75%) even though the style says differently. I am not sure if this is an issue with combining CSS grid with jQueries .animate(). Another issue is any padding applied to the result rows affects the initial layout.
And the other using flexBox !! :
This isn’t as fancy as the jquery version. Issue with this one is the .container has to have a fixed height or it won’t work, 100% doesn’t seem to work either. The results rows are not visible if there is no content and only expand based on content. It may be possible to add jQueries .animate() to the results rows but if results have an unknown height then the .container fixed height is a problem.
Overall, I was suprised flexBox could achieve the animation but found it a bit limiting because of the fixed height, the animation is quite pretty. I really like the animation rendered by jQuery, it’s just that white space in jQuery that is holding me up???!!!???
Thoughts anyone?