Item height is 300px for every items

[hulxv]

When I tried to make a dynamic list in my app,
I found something like padding between items but when trying print 'style', I found the height equal to 300px and top equal to n*300px
n = number of visual element

For more clarification :

So, How can I fix that?

Code

function LogAlert({ status, date, content }) {
	return (
		<Box>
			<Alert status={status}>
				<AlertIcon />
				<Box flex={1}>
					<AlertTitle mr={2}>{date}</AlertTitle>{" "}
					<AlertDescription>{content}</AlertDescription>
				</Box>
			</Alert>
		</Box>
	);
}

const LogRows = ({ data }) => {
	const listRef = useRef();
	const cache = createCache();

	return (
		<DynamicList
			cache={cache}
			ref={listRef}
			data={data}
			width='100%'
			height={500}>
			{({ index, style }) => {
				console.log(style);
				return (
					<div style={style}>
						<LogAlert
							status={data[index]?.status}
							content={data[index]?.content}
							date={data[index]?.date}
						/>
					</div>
				);
			}}
		</DynamicList>
	);
};

I'm using Nextjs for frontend
"react-window": "^1.8.6",
"react-window-dynamic-list": "^2.4.2",

[hulxv]

Anyone here ?

[gnir-work]

Hey, Sorry for the late reply, I am quite busy these days. I will take a look at it in a couple of days :) Meanwhile, if you could send a link to codesandbox that would be great!

…

On Fri, Dec 24, 2021, 11:51 Mohamed Emad ***@***.***> wrote: Anyone here ? — Reply to this email directly, view it on GitHub <#32 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKLMGSU2OPYSAX3O5NK3SWTUSQ7BTANCNFSM5KRTKXLQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[hulxv]

Unfortunately, It is a desktop app, not a website.
but that all the code for this page

import DynamicList, {createCache} from 'react-window-dynamic-list'
import { useState, useEffect, useRef } from "react";

import {
	Alert,
	AlertIcon,
	AlertTitle,
	AlertDescription,
	Button,
	IconButton,
	Box,
	Tooltip,
	Flex,
	Spinner,
	HStack,
	Stack,
	Input,
	InputRightElement,
	InputGroup,
} from "@chakra-ui/react";

import {
	HiTrash,
	HiRefresh,
	HiOutlineInformationCircle,
	HiSearch,
	HiX,
} from "react-icons/hi";
import { useLogs } from "@Context/logs";

const cache = createCache()

function Logs() {
	const { logs, GetLogs, ClearLogs, isLoading } = useLogs();

	const [search, setSearch] = useState({ bool: false, value: "" });

	useEffect(() => GetLogs(), []);


	return (
		<>
			
			<Flex w='full' justify='space-between' my={3}>
				<Tooltip
					hasArrow
					placement='right'
					label={`Logs stored in ${logs.path}`}>
					<IconButton
						variant='ghost'
						cursor='default'
						icon={<HiOutlineInformationCircle size='1.3em' />}
					/>
				</Tooltip>

				<HStack justify='end' spacing={3}>
					{search.bool ? (
						<InputGroup w='300px'>
							<Input
								placeholder='Search'
								variant='filled'
								value={search.value}
								onChange={(e) =>
									setSearch({ ...search, value: e.target.value })
								}
							/>
							<InputRightElement>
								{search.value ? (
									<IconButton
										variant='none'
										icon={<HiX size='1.4em' />}
										onClick={() => setSearch({ ...search, value: "" })}
									/>
								) : (
									<IconButton
										variant='none'
										icon={<HiSearch size='1.4em' />}
										onClick={() => setSearch({ ...search, bool: !search.bool })}
									/>
								)}
							</InputRightElement>
						</InputGroup>
					) : (
						<Tooltip label='Search in logs'>
							<IconButton
								variant='ghost'
								icon={<HiSearch size='1.4em' />}
								onClick={() => setSearch({ ...search, bool: !search.bool })}
							/>
						</Tooltip>
					)}

					<Button leftIcon={<HiRefresh />} onClick={() => GetLogs()}>
						Refresh
					</Button>
					<Button
						leftIcon={<HiTrash />}
						colorScheme='red'
						onClick={() => ClearLogs()}>
						Clear All
					</Button>
				</HStack>
			</Flex>
			<Stack spacing={1}>
				{isLoading ? (
					<Flex my={3} w='full' h='full' align='center' justify='center'>
						<Spinner size='xl' color='green' />
					</Flex>
				) : logs?.lines.length <= 0 ? (
					<div>No logs found</div>
				) : (
					<>
						<LogRows data={logs?.lines} />
					</>
				)}
			</Stack>
		</>
	);
}

function LogAlert({ status, date, content }) {
	return (
		<Box>
			<Alert status={status}>
				<AlertIcon />
				<Box flex={1}>
					<AlertTitle mr={2}>{date}</AlertTitle>{" "}
					<AlertDescription>{content}</AlertDescription>
				</Box>
			</Alert>
		</Box>
	);
}

const LogRows = ({ data }) => {
	const listRef = useRef();
	const cache = createCache();

	return (
		<DynamicList
			cache={cache}
			ref={listRef}
			data={data}
			width='100%'
			height={500}>
			{({ index, style }) => {
				console.log(style);
				return (
					<div style={style}>
						<LogAlert
							status={data[index]?.status}
							content={data[index]?.content}
							date={data[index]?.date}
						/>
					</div>
				);
			}}
		</DynamicList>
	);
};

export default Logs;

• I use chakra-ui for UI components

[hulxv]

Should the component which contains the list have a specific style?

And no problem if you are busy, Take your time, The important thing is that I don't disturbing you 😄

[gnir-work]

Hey :)
Looking at your snippet is there a reason why it won't work in a browser?
It seems as all of the code and libraries used here are compatible to browser as well.

In the mean time I'm trying to reproduce the issue in my browser :)

[hulxv]

Is it possible that the cause of the problem is that I am using Nextjs?

[gnir-work]

Hey :)
So I had a free hour to investigate today and I found some intersting things.

1. It isn't because of Nextjs as it happened in CRA as well:)
2. I ran your sample code in my browser with debug enabled (Making react-window-dynamic-list render the measuer layer to the screen) and as you can see in the attached screentshot the styling was missing.
   
   After checking the DOM I noticed that chakra assigns a unique id to each styled component and for some reason the classnames that are generated for the components in the measuring layer don't recieve any styling
   
   I will continue to look at it at my free time (probably in a couple of days).
   If you have any ideas please share :)

[hulxv]

The cause for this problem is <AlertIcon/>

with <AlertIcon/> :

without <AlertIcon/> :

But after testing with long text and without <AlertIcon/>, That happened:

All items have the same height for the first item, And that moves us to another bug. D;