Kevin Powell - Community•2y ago

Having trouble setting the height for a sticky component

Hi everyone, is there any front end wizards here who can help me recreate Indeed's job details component? I would like to recreate Indeed's job details component that's to the right of the screen when searching the jobs. It appears that the component knows where the bottom of the page is and it doesn't go off screen also it stretches so that it becomes sticky when it reaches the top of the viewport. Mine becomes sticky when it reaches the top but it goes off screen to the bottom until the viewport reaches 100vh. I have no idea how to explain that but I hope someone who can help me understands it from the video. This is the main grid ( I've also tried flex, it does the same thing )

      <Grid gridTemplateColumns={{ base: "1fr", xl: "repeat(2, 1fr)" }}>
        <Grid
          gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
          p="20px"
          gap="5"
        >
          {jobs.map((_job) => (
            <NewJobsCard
              key={_job.id}
              job={_job}
              selectedJob={setSelectedJob}
            />
          ))}
        </Grid>
        <GridItem visibility={{ base: "hidden", xl: "visible" }}>
          <MainJobInfoBox entry={jobs[selectedJob]} />
        </GridItem>
      </Grid>

      <Grid gridTemplateColumns={{ base: "1fr", xl: "repeat(2, 1fr)" }}>
        <Grid
          gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
          p="20px"
          gap="5"
        >
          {jobs.map((_job) => (
            <NewJobsCard
              key={_job.id}
              job={_job}
              selectedJob={setSelectedJob}
            />
          ))}
        </Grid>
        <GridItem visibility={{ base: "hidden", xl: "visible" }}>
          <MainJobInfoBox entry={jobs[selectedJob]} />
        </GridItem>
      </Grid>

and here's the job details component

    <Box
      maxH="calc(100vh - 120px)"
      position="sticky"
      bg="white"
      m="5"
      p="5"
      rounded="xl"
      top="calc(80px + 20px)"
      left="0"
      border="1px solid"
      borderColor="#0000001a"
      overflowY="auto"
      sx={{
        "::-webkit-scrollbar": {
          width: "3px",
        },
        "::-webkit-scrollbar-track": {
          background: "transparent",
        },
        "::-webkit-scrollbar-thumb": {
          borderRadius: "999",
          background: "#000",
        },
        "::-webkit-scrollbar-thumb:hover": {
          background: "#000",
        },
      }}
      display={{ base: "none", xl: "inline-flex" }}
    >

    <Box
      maxH="calc(100vh - 120px)"
      position="sticky"
      bg="white"
      m="5"
      p="5"
      rounded="xl"
      top="calc(80px + 20px)"
      left="0"
      border="1px solid"
      borderColor="#0000001a"
      overflowY="auto"
      sx={{
        "::-webkit-scrollbar": {
          width: "3px",
        },
        "::-webkit-scrollbar-track": {
          background: "transparent",
        },
        "::-webkit-scrollbar-thumb": {
          borderRadius: "999",
          background: "#000",
        },
        "::-webkit-scrollbar-thumb:hover": {
          background: "#000",
        },
      }}
      display={{ base: "none", xl: "inline-flex" }}
    >

1 Reply

emmanuelyolou•2y ago

I'm not really a React dev but since it didn't have any answer, i'll try to help lol🏃 If i understood your issue, you want the job details container to entirely fit in the screen without having to scroll first, right ? I think the issue might be the height of your job details. I don't know how you set the height for your NewJobsCard but your JobDetails should take the same height as two rows (occupied by the Job card) + the gap. If we could see the code for the NewJobsCard it might help. However try it. If the NewJobsCard have a fixed size, then the job details should be twice taller + the gap.

Gaming

Programming

Having trouble setting the height for a sticky component