rcs-custom-scrollbar / scrollbar does not show up

[ghost]

Hello,

the scrollbar seems not showed up.

Here is my code:

Scrollbar.tsx

import React from 'react'
import CustomScroll from 'react-custom-scroll'

const Scrollbar: React.FC<{
    children: React.ReactNode
}> = ({ children }) => {
    return <CustomScroll>{children}</CustomScroll>
}

export default Scrollbar

ModalContent.tsx:

import Scrollbar from '@/components/Scrollbar'
import { styled } from 'linaria/react'
import React from 'react'

const ModalContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    return (
        <Container>
            <Scrollbar>{children}</Scrollbar>
        </Container>
    )
}

export default ModalContent

const Container = styled.div`
    max-height: 50vh;
    overflow-x: hidden;
`

I have already hide the native scrollbar by the following css:

*{
  -ms-overflow-style: none !important;
   scrollbar-width: none !important;
}
::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    background: transparent;
}

[rommguy]

Hi, I'm glad you're using this component. You need to remove all scrollbar css - it is not needed as ReactCustomScroll handles that Did you include the ReactCustomScroll css file as described in the Readme?

[ghost]

Hi, I'm glad you're using this component. You need to remove all scrollbar css - it is not needed as ReactCustomScroll handles that Did you include the ReactCustomScroll css file as described in the Readme?

Yes. I have tried adding the css and removed all the customed css.

The issue is that there is no rcs-custom-scrollbar div in DOM.

[speeday]

@lodisy As per my suggestion in using this component, we can't use max-height property to the Parent Element of this Component so instead of it use height property.

Basically MAX-HEIGHT property removes rcs-positioning element before rcs-inner-container element inside of rcs-outer-container DIV Structure.

So try to replace Max-Height with Height Property on style and check it.

@rommguy Do you have any idea to use this component with Max-Height CSS Property to it's Parent Element..?

[AshfaqKabir]

@lodisy I was having the Exact same issue. You have to specifically add the height to the children element to solve the problem.

<Box
  mt="30px"
  ml="30px"
  textAlign="justify"
  width="300px"
  height="300px" //only adding here will not work
>
  <CustomScroll>
    <p
      style={{
        height: '300px' //specifically define the height to the children
      }}
    >
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores nequ
    </p>
  </CustomScroll>
</Box>