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 https://github.com/gnir-work/react-window-dynamic-list/issues/32#issuecomment-1000759497, 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;