Search code examples
cssreactjsreact-bootstrapsticky

React Bootstrap - position sticky not working

I am using React Bootstrap and the class position-sticky doesn't work at all. There is not overflow at all levels. Any hints?

Solution

  • I found out the Container needs height specified.

    Adding height: 100% to the parent and top: 0 to the child fixes the issue.

    The reason is that the sticky rule uses the height of the parent to calculate its own position.

    Using React Bootstrap the className h-100 can be used to set height: 100%

    I hope this helps also others :)