React how to display an image on top of the entire screen when the image is generated in one of the sub-components

yotube
0

Issue

I use a third party component (react-infinite-scroll-component) inside some other components to display a list of objects which some of them contain an image. What I want to do is that when the user clicks on the image, the image will be presented in full screen, that should cover the entire desktop screen.

Now the problem is I did make the image 'full screen' somehow but it's only filling the react-infinite-scroll-component in which this image resides, not the entire screen as I expect.

This is the main part that uses the scroll-component

<InfiniteScroll
dataLength={arrs.length}
hasMore={true}
scrollThreshold={0}
height={500}
scrollableTarget="scrollableDiv"
>
{<Examples arrs={arrs} />}
</InfiniteScroll>

demonstration is here; To see the demo, simply click on the image, you will see the image is not filling the whole screen.

The styling is in s.scss file


Solution

In your .container selector, you should change the

position: absolute;

to

position: fixed;


Answered By - tpliakas

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top