Html Question posted in
Some basic documentation can be found here.

Html – How can I make sure my iframe takes the whole width and height of the screen, regardless of any width restrictions

So i have an widget I built using an iframe and I give it to users like this

<div style="height: 100px; width: 100px">
    <iframe src="https://jade-biscuit-7026ef.netlify.app/?productId=LprOsWjrho5B&type=popup" style="border: 0;"
      height="100vh" width="100vw"></iframe>
  </div>

so users can set the height and width in the container div as shown above. My problem now is, in the iframe, I have a modal that opens up on click of a button, so i want this modal to take up the full width and height of the user’s screen but instead, it is restricted by the dimensions of the containing div

below is the code in my iframe:

/** @format */

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalBody,
  useDisclosure,
  Box,
} from "@chakra-ui/react";
import CheckoutInfo from "./CheckoutCard";
import { Button } from "mainstack-design-system";
import { useEffect, useState } from "react";
import { TPaymentOptions, TProductDataRes } from "types";
import StripeCardCheckout from "./StripeCardCheckout";

interface IProps {
  width: string | null;
  productId: string;
  btnText?: string;
}
const PopupCheckout = ({ width, productId, btnText }: IProps) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [openModal,setOpenModal] = useState(false)
  const [paymentOption, setPaymentOption] = useState<TPaymentOptions>("");
  const [productData, setProductData] = useState<TProductDataRes>(
    {} as TProductDataRes
  );

  const ipAddress = JSON.parse(window.localStorage.getItem("userIp"));
  const isNigerian = ipAddress?.currency === "NGN";

  useEffect(()=>{
    setOpenModal(true)
  },[])
  return (
    <>
      <Button
        variant="primary"
        onClick={onOpen}
        label={btnText ?? "Proceed to checkout"}
        size="medium"
      />
      
      <Modal isOpen={openModal} onClose={onClose}>
        <ModalOverlay />
        <ModalContent
          className="modal"
          borderRadius={'0.75rem'}
          maxWidth={width}
          // w={"95%"}
          // maxH={"90vh"}
          overflow={"scroll"}
        >
          <ModalBody padding={0}>
            <CheckoutInfo
              hasBorder
              hasCancel
              closeModal={() => setOpenModal(false)}
              paymentOption={paymentOption}
              setPaymentOption={setPaymentOption}
              productId={productId}
              setProductData={setProductData}
            />
            {paymentOption === "card" && !isNigerian && (
              <StripeCardCheckout
                setPaymentOption={setPaymentOption}
                productData={productData}
                closePopup={() => setOpenModal(false)}
              />
            )}
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
};

export default PopupCheckout;

and below is how a user can call it:

<div style="height: 100vh;">
    <iframe src="https://jade-biscuit-7026ef.netlify.app/?productId=LprOsWjrho5B&type=popup" style="border: 0;"
      height="100%" width="100%"></iframe>
  </div>
Tags:

2

Answers


  1. 0

    Potential Solution: add styling to modal and iframe itself..

    import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalBody,
  useDisclosure,
} from "@chakra-ui/react";
import CheckoutInfo from "./CheckoutCard";
import { Button } from "mainstack-design-system";
import { useEffect, useState } from "react";
import { TPaymentOptions, TProductDataRes } from "types";
import StripeCardCheckout from "./StripeCardCheckout";

interface IProps {
  width: string | null;
  productId: string;
  btnText?: string;
}
const PopupCheckout = ({ width, productId, btnText }: IProps) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [paymentOption, setPaymentOption] = useState<TPaymentOptions>("");
  const [productData, setProductData] = useState<TProductDataRes>(
    {} as TProductDataRes
  );

  const ipAddress = JSON.parse(window.localStorage.getItem("userIp"));
  const isNigerian = ipAddress?.currency === "NGN";

  useEffect(() => {
    onOpen();
  }, [onOpen]);

  return (
    <>
      <Button
        variant="primary"
        onClick={onOpen}
        label={btnText ?? "Proceed to checkout"}
        size="medium"
      />

      <Modal isOpen={isOpen} onClose={onClose} size="fullScreen">
        <ModalOverlay />
        <ModalContent
          className="modal"
          borderRadius={'0.75rem'}
          maxWidth={width}
        >
          <ModalBody padding={0}>
            <CheckoutInfo
              hasBorder
              hasCancel
              closeModal={onClose}
              paymentOption={paymentOption}
              setPaymentOption={setPaymentOption}
              productId={productId}
              setProductData={setProductData}
            />
            {paymentOption === "card" && !isNigerian && (
              <StripeCardCheckout
                setPaymentOption={setPaymentOption}
                productData={productData}
                closePopup={onClose}
              />
            )}
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
};

export default PopupCheckout;

    iframe

    return 
(<div style="height: 100vh;">
  <iframe
    src="https://jade-biscuit-7026ef.netlify.app/?productId=LprOsWjrho5B&type=popup"
    style="border: 0; width: 100%; height: 100%;"
    onLoad={(e) => {
      const iframeDocument = e.target.contentDocument;
      const styleTag = iframeDocument.createElement('style');
      styleTag.innerHTML = `
        /* Add your custom styles here */
        body {
          margin: 0;
          overflow: hidden;
        }
      `;
      iframeDocument.head.appendChild(styleTag);
    }}
  ></iframe>
</div>)
    Login or Signup to reply.
  2. 0

    you can set inline style to give the iframe width and height of 100% of its parent

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search