CODEWITHSUNDEEP
reactjsreact-modal
user15375616
user15375616

Reputation: 127

React Modal I want to be able to scroll a modal when it is vertically long

I am using react-modal.
I would like to be able to scroll the modal vertically when the screen is small. Currently, when the screen is small, the modal cannot be scrolled, so you cannot see the whole modal.

code

import React, { useState } from "react";
import styled from "styled-components";
import Modal from "react-modal";

export default function App() {
  const [isOpen, setModal] = useState(true);

  const Container = styled.div<{ height?: string }>`
    width: 400px;
    height: ${({ height }) => (height ? height : "")};
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    background: #ffffff;
  `;

  const customStyles = {
    overlay: {
      background: "rgba(0, 0, 0, 0.5)"
    },
    content: {
      top: "50%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      marginRight: "-50%",
      transform: "translate(-50%, -50%)",
      padding: "0"
    }
  };

  return (
    <>
      <Modal
        isOpen={isOpen}
        onRequestClose={() => {
          setModal(false);
        }}
        contentLabel="modal"
        style={customStyles}
      >
        <p>Modal</p>
        <Container height={"600px"}></Container>
      </Modal>
    </>
  );
}

Upvotes: 0

Views: 4022

Answers (1)

Sojin Antony
Sojin Antony

Reputation: 2217

 const customStyles = {
    overlay: {
      background: "rgba(0, 0, 0, 0.5)"
    },
    content: {
      ...//
      height:"200px" //or maxHeight 
    }
  };

add a fixed height or maxHeight to the modal

To scroll your entire modal you can use this style

 const customStyles = {
    overlay: {
      background: "rgba(0, 0, 0, 0.5)",
      overflowY:"scroll"
    },
    content: {
     // your code
    }
  };

Upvotes: 4

Related Questions