How to stop custom modal from expanding past the screen

user_13597897 0
Viewed 67

I'm trying to create a custom modal without any libraries. This modal displays the current users and depending on the amount of active users it can get very big. If the amount of elements in the modal go past the bottom of the screen I cant see the entire modal.

Ideally, I'd like to have the modal always be centered and contained within the screen and if there are too many elements then the user would be able to scroll down through the modal without moving the background. Any help is really appreciated!

this is what I've landed on so far but it's no where close to correct. The modal has no scroll capabilities and will get cut off by the screen if it gets too big:

const Modal: React.FC<IModalProps> = (props) => {
  

     if (!props.isOpen) {
       return null;
     }

  return (
    <>
         <ModalBackgroundStyled onClick={props.onCloseRequest}/>
            <ModalWrapper>
                {props?.users?.map(user=>{
                    return(
                        <NamePlate user={user}/>
                    );
                })}
            </ModalWrapper>
    </>
    )
};

export default Modal;

     const ModalBackgroundStyled = styled.div`
     background-color: rgba(255,255,255,0.5);
     backdrop-filter: blur(2px);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1;
     height:200%;
     width:200%;
     display: flex;
     justify-content: center;
     align-items: center;
   `;

const ModalStyled = styled.div`

    display:flex;
    flex-direction: column;
    align-items:center;
    background: #E5E5E5;
    border-radius: 4px;
    overflow: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    min-width: 30rem;
    z-index: 2;
`;
reactjs css javascript
1 Answers

If you want to have the contents of the modal fit the screen height and show a scrollbar in case the contents of the modal exceed the height of the screen you should set the max-height of the ModalWrapper to anything less than or equal to the view height and set the overflow-y to scroll. See example below:

const ModalWrapper = styled.div`
      max-height:100vh;
      overflow-y:scroll;
`;
user_16943970
Related