I want to make it centered like the 1st modal on https://tailwindui.com/components/application-ui/overlays/modals
I copied the same classes on the Modal below but I am unable to center it vertically. The classes are the exact same.
Is it a React Portal issue?
import * as React from "react"
import { Dialog } from "@headlessui/react"
type ModalProps = {
isOpen: boolean
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
}
export const Modal = ({ isOpen, setIsOpen }: ModalProps) => {
return (
<Dialog
open={isOpen}
onClose={setIsOpen}
as="div"
className="fixed inset-0 z-10 overflow-y-auto"
>
<div className="flex flex-col bg-gray-800 text-white w-96 mx-auto py-8 px-4 text-center">
<Dialog.Overlay />
<Dialog.Title className="text-red-500 text-3xl">
Deactivate account
</Dialog.Title>
<Dialog.Description className="text-xl m-2">
This will permanently deactivate your account
</Dialog.Description>
<p className="text-md m-4">
Are you sure you want to deactivate your account? All of your data
will be permanently removed. This action cannot be undone.
</p>
<button
className="w-full m-4 inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setIsOpen(false)}
>
Deactivate
</button>
<button
className="m-4 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setIsOpen(false)}
>
Cancel
</button>
</div>
</Dialog>
)
}
Codesandbox → https://codesandbox.io/s/headless-ui-dialog-1gd8e
I would like to center it vertically & horizontally. How do I do it?
I had to add flex justify-center items-center
to the parent & remove the mx-auto
class from the child.
import * as React from "react"
import { Dialog } from "@headlessui/react"
import clsx from "clsx"
type ModalProps = {
isOpen: boolean
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
}
export const Modal = ({ isOpen, setIsOpen }: ModalProps) => {
return (
<Dialog
open={isOpen}
onClose={setIsOpen}
as="div"
className={clsx(
"fixed inset-0 z-10 overflow-y-auto flex justify-center items-center",
{
"bg-gray-900": isOpen === true,
},
)}
>
<div className="flex flex-col bg-gray-800 text-white w-96 py-8 px-4 text-center">
<Dialog.Overlay />
<Dialog.Title className="text-red-500 text-3xl">
Deactivate account
</Dialog.Title>
<Dialog.Description className="text-xl m-2">
This will permanently deactivate your account
</Dialog.Description>
<p className="text-md m-4">
Are you sure you want to deactivate your account? All of your data
will be permanently removed. This action cannot be undone.
</p>
<button
className="w-full m-4 inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setIsOpen(false)}
>
Deactivate
</button>
<button
className="m-4 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setIsOpen(false)}
>
Cancel
</button>
</div>
</Dialog>
)
}
It looks perfect now → https://codesandbox.io/s/headless-ui-dialog-1gd8e