1 reply

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" }}
    >

Having trouble setting the height for a sticky component

      <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" }}
    >

Having trouble setting the height for a sticky component

Having trouble setting the height for a sticky component

Similar Threads

Similar Threads

Similar Threads