the React page is not scrollable

Question

I am not able to make the page scrollable the code is as given below and i have not used any css i am still a new bee i have used map function to render the components i have sent the data using props thats it i am writing this because to fill space and nothing else

import { SimpleGrid, Flex } from "@chakra-ui/react";
import React, { useEffect, useState } from "react";

import Doccard from "../../components/doccard";
import { docdata } from "./docdat";
import data from "./docdat.json";
import Navbar from "../../components/Navbar";
import axios from "axios";


const url1 = "http://localhost:7000/doctors";

function Doctors() {
  const [docdatai, setdocdatai] = useState([]);

  useEffect(() => {
    axios
      .get(url1)
      .then((Response) => {
        console.log(Response.data);
        setdocdatai(Response.data);
      })
      .catch((err) => {
        console.log("error fetching data");
      });
    console.log("fetched");
  }, []);

  return (
    <div className="scrollable-div" style={{ overflow: "scroll" }}>
      <br />
      <br />
      <SimpleGrid columns={[2, 3, 5]} spacing={"20"} mt={4} mx={10}>
        {console.log(docdatai)}
        {docdatai.map((cardinfo, index) => {
          return (
            <Doccard
              name={cardinfo.name}
              username={cardinfo.username}
              specialization={cardinfo.specialization}
            />
          );
        })}
      </SimpleGrid>
    </div>
  );
}

export default Doctors;

score 1 · Answer 1 · answered Jun 25 '22 at 16:58

Use overflow-y:auto for displaying scroll automatically when the content exceeds the divs set height.

Answer from ZWord, here

Keep in mind, the div will only be scrollable when the content inside is taller than the set height (you may want to set the height to 100vh and the width to 100vw to set the height / width to 100% of the screen). If you want to make the div x-axis scrollable, change it to overflow-x:auto, and if you want it to do both, use overflow:auto

the React page is not scrollable

1 Answers1