Table Footer not fixed in the bottom of every page in ios devices

Question

Table Footer not fixed in the bottom of every page in ios devices. it works fine in android and windows devices The code is:

  const downloadPdfRef = useRef();
  let date = new Date();
  const handlePrint = useReactToPrint({
    content: () => downloadPdfRef.current,
    documentTitle: `JustATutor-${date.getDate()}-${date.getMonth()}-${date.getFullYear()}`,
    removeAfterPrint: false,
  }); 
 
  const manipulateDOM = () => {
    let ql_container_node = document.querySelectorAll(".ql-container");
    let ql_editor = document.querySelectorAll(".ql-editor");
    ql_container_node?.forEach((element) => element.classList.add("hide-border"));
    ql_editor?.forEach((element) => element.classList.add("reduce_editor_padding"));
  };
  const quillRef = useCallback((node) => {
    if (node !== null) {
      manipulateDOM();
    }
  }, []);
  useEffect(() => {
    manipulateDOM();
  }, [format]);

  return (
    <>
      <Container
        maxWidth={false}
        sx={{
          paddingRight: { xs: "16px" },
          paddingLeft: { xs: `${globalVariable}px`, md: `${globalVariablemd}px` },
          paddingTop: "10px",
          paddingBottom: "16px",
        }}
      >
        <>
          <div className="flex flex-col w-full min-h-full print_questions_container " >
            <div className="view-question-container p-8 pb-8 bg-[#ffffff] relative w-full" ref={downloadPdfRef} style={{minHeight: '100vh'}}>
              <div>
                <div className="flex justify-between w-full">
                  <div className="self-end">
                    <Typography variant="h6" className="print-heading-primary uppercase font-bold w-fit leading-none font-arial my-1">
                      JustATutor
                    </Typography>
                    <Typography className="print-heading-secondary font-bold leading-none font-arial">{headerText}</Typography>
                  </div>
                  <img src={HeaderImage} alt="Character Image" className="h-auto w-[60px] -mb-1" />
                </div>
                <Divider
                  className="h-1"
                  sx={{
                    marginBottom: "12px",
                  }}
                />
                <Typography className="print-heading-secondary text-2xl leading-none font-romans" sx={{ lineHeight: "1" }}>
                  <pre style={{ fontFamily: "inherit" }}>{topicText}</pre>
                </Typography>
                <Divider
                  className="h-1"
                  sx={{
                    marginTop: "12px",
                    marginBottom: "12px",
                  }}
                />
              </div>

              <Table>
                <TableBody className="page-breaker">
                  <TableRow style={{ borderBottom: "none" }}>
                    <TableCell sx={{ borderBottom: "none" }}>
                      <div className="mt-1 mb-1">
                        <div>
                          <Typography
                            variant="h6"
                            className="font-bold font-romans leading-[0.6] w-fit border-black text-black "
                            sx={{ fontSize: "16px", borderBottomWidth: "1px", lineHeight: "0.8", marginBottom: "0.5rem" }}
                          >{`Question 1`}</Typography>
                        </div>
                        <div>
                          <Typography
                            variant="h6"
                            className="font-bold font-romans leading-[0.6] mt-3 w-fit border-black text-black"
                            sx={{ fontSize: "16px", borderBottomWidth: "1px", lineHeight: "0.8", marginBottom: "0.5rem" }}
                          >
                            Answer
                          </Typography>
                        </div>
                      </div>
                    </TableCell>
                  </TableRow>
                </TableBody>
                <TableFooter>
                  <TableRow>
                    <TableCell>
                      <div className="flex justify-between footer-image mt-4" ref={quillRef}>
                        <Typography className="font-bold leading-none font-arial" sx={{ fontSize: "12px" }}>
                          {headerText}
                        </Typography>
                        <img className="footer-logo " src={FooterLogopng} alt="logo" />
                      </div>
                    </TableCell>
                  </TableRow>
                </TableFooter>
              </Table>
            </div>
            <Divider className="h-2 my-10" />
          </div>

          <div className="text-end ">
            <Button
              text={"Download as PDF"}
              primary
              className="px-8 my-4 py-2"
              onClick={() => {
                handlePrint();
              }}
            />
          </div>
        </>
      </Container>
    </>
  );
};

export default PrintPdfPage;

And its CSS IS:

@media print {
  /* html and body tweaks */
  html, body {
    height: auto !important;
    overflow: initial !important;
    background: none;
    font-size: 7.5pt; /* changing to 10pt has no impact */
  }
.topNavBar, .HideOnPrint{
  display: none;
}
  /* Page breaks */
  .page-break-after {
    display: block;
    page-break-after: always;
    position: relative;
  }

  tbody tr td {
    margin-top: -8px;
    padding-top: 80px;
    page-break-inside: avoid;
  }

  .print_questions_container .ql-container, td {
    border-bottom: none !important;
    padding: 0px 0px !important;
  }

  .section-answers table {
    page-break-before: always !important;
    page-break-inside: avoid;
  }
 
  .page-breaker {
    page-break-after: auto;
    /* page-break-after: always; */
  }

  .page-breaker tr {
    padding-top: 2px;
  }

  /*---Below styles are to avoid page break in questions in Question and then Answers mode.*/
  .page-breaker tr {
    display: block !important;
    page-break-inside: avoid !important;
  }
  .page-breaker tr td {
    display: block !important;
    page-break-inside: avoid !important;
  }
  /* ------- */

  body .footer-image {
    position: absolute;
    bottom: 5px;
    left: 0;
    padding: 0 1rem;
    width: 100% !important;
  }
  
  body .footer-placeholder {
    display: block;
  }

  .page-break-before {
    display: block;
    page-break-before: always;
    position: relative;
  }

  @page {
    size: A4; /* DIN A4 standard, Europe */
    margin: 20px 35px 0.8rem 35px;
    overflow: hidden;
  } 
}

output in windows devices is: Output in Windows Laptop output in ios devices is Output in Ios Device

I want that the footer in stick in the bottom of every page while printing

Answer 1

Just add these two lines in your footer css:

position: sticky;
top: 100%;