I'm currently facing an issue where the scroll bar is not appearing on my page when more elements are added. In addition, I have a modal that covers the entire page when clicking on an item.
However, changing the CSS position: fixed property affects the appearance of the modal. How can I ensure that both the scroll bar appears and the modal overlays correctly?
Check out these images for reference:
Elements with scroll bar, but no modal
App.css:
.page-container {
height: 100%;
width: 100%;
position: fixed;
z-index: 0;
}
.modify-modal-container {
height: 100%;
width: 100%;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0, 0.5);
z-index: 1;
}
.modify-modal-container-hide {
display: none;
}
Index.css:
body, html, #root, .App {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: white;
}
The provided images illustrate the issue I'm experiencing - while I am able to display the scroll bar, the modal fails to open when clicking on an item. Any assistance would be greatly appreciated. Thank you!