I'm experimenting with the windowing technique in Next.js with Antd, and I made this simple app that has this index.tsx page:
import { CSSProperties } from 'react'
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList as List } from 'react-window'
import { Card, Tooltip } from 'antd'
import data from '../data'
import styles from '../styles/Home.module.css'
const people = data();
const Row = ({ index, style }: { index: number, style?: CSSProperties }) => (
<div style={style}>
<Card bordered={true}>
<p>{people[index].name}</p>
<Tooltip title={`${Math.floor(people[index].age/15)} in dog years`}>
<p>{people[index].age}</p>
</Tooltip>
</Card>
</div>
)
const Home: NextPage = () => {
return (
<AutoSizer>
{({ height, width }) => (
<List
height={height}
itemCount={people.length}
itemSize={100}
width={width}
>
{Row}
</List>
)}
</AutoSizer>
)
}
export default Home
The FixedSizeList
won't work until I add the following style in globals.css:
html, body, div {
height: 100%;
}
However, when I do that, it breaks the Tooltip
by Antd. Usually what happens is that when I hover above a relevant element, the tooltip appears for a split second with 100% height and then disappears and it doesn't appear anymore on a page no matter where I hover.
How can I solve this?
I finally found a solution after much agony.
Apparently, Nextjs wraps the entire layout with a div with id __next
. That's the outer-most container of the entire page, and its height is not set, so since the content of FixedSizeList
is positioned such that it's outside of the regular page flow, the __next
div gets a height of 0.
I don't know if there is any better solution, but I simply added this little style in the globals.css file:
div#__next {
height: 100%;
}
That fixed the issue without forcing every other div in the page to have height at 100% (which includes the tooltips and popovers).