I am facing an issue with displaying an Iframe inside a modal. The challenge is that the content within the Iframe varies in height, making it difficult to set a fixed height for the Iframe itself. When I try setting the height to 100%, the result is a 150px tall Iframe with scrollbars.
Is there a way to adjust the height so that there are no scrollbars, and instead have the scrolling behavior controlled by the NextUI modal using scrollBehaviour:outside?
Code snippet for the Iframe component:
const IframeComponent = () => {
return <iframe title="wheel" url="XXXX" className="h-full w-full rounded-[30px]" />
}
export default IframeComponent
Code snippet for the Modal component:
import { Modal, ModalBody, ModalContent, ModalProps, useDisclosure } from "@nextui-org/react"
import Image from "next/image"
import { useEffect, useState } from "react"
import IframeComponent from "./Iframe"
const IframeWrapper = () => {
const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure()
const [scrollBehavior, _setScrollBehavior] = useState<ModalProps["scrollBehavior"]>("outside")
// Open the modal on load.
// Should the modal open automatically on each load?
useEffect(() => {
onOpen()
}, [onOpen])
return (
<>
<Modal
isOpen={isOpen}
onOpenChange={onOpenChange}
size="5xl"
placement="center"
hideCloseButton={true}
radius="lg"
scrollBehavior={scrollBehavior}
className="w-[90vw]"
>
<ModalContent>
<>
<ModalBody className="p-0">
<button
onClick={onClose}
className="absolute right-4 top-3 select-none appearance-none rounded-full p-2 text-foreground-500 outline-none tap-highlight-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-offset-2 data-[focus-visible=true]:outline-focus rtl:left-1 rtl:right-[unset] lg:right-10 lg:top-7"
>
<Image
src="/icons/closeModal.svg"
alt="close button"
width={0}
height={0}
className="h-8 w-8 lg:h-16 lg:w-16"
/>
</button>
<IframeComponent />
</ModalBody>
</>
</ModalContent>
</Modal>
</>
)
}
export default IframeWrapper