how to make custom sized modal in chakra UI

Question

i want to create custom sized modals in chakra UI in react js. the modal should have width 1000px and height 800px I have tried to create a custom sized modal by using themes where I have overriden the xl size of modal but it doesn't work

const theme = extendTheme({
  breakpoints,
  config,
  fonts: {
    heading: "Nunito",
    body: "Nunito",
  },
  components:{
Modal:{
  sizes:{
    xl:{     
        h:"600px",
        w:'1000px',
      },     
    }
  }
}
},
  colors: {
    yellow: {
      100: "#FFBE17",
    },
    green: {
      100: "#45C79B",
    },
    red: {
      100: "#E8736F",
    },
   
    gray: {
      100: "#D1D1D1",
      200:'#E5E5E5',
      300:"#C4C4C4"
    },
  },
});

 components:{
Modal:{
  sizes:{
    xl:{
      h:"600px",
      w:'1000px',
     
    }
  }
}

score 7 · Answer 1 · answered May 19 '22 at 19:37

7

Do something like this:

<ModalContent maxH="400px" maxW="500px">
 {...}
</ModalContent>

answered May 19 '22 at 19:37

Chinonso

188
3
10

1

This works also with for example `minW` but doesn't seem to work with `w='400px'`, anyone knows why ? – Cat-Lord Dec 08 '22 at 20:35

score 4 · Answer 2 · answered Mar 04 '22 at 06:28

4

You can do something like this using theme.

components:{
    Modal:{
     baseStyle: {
            dialog: {
                maxHeight: "calc(100vh - 50px)",
                overflowY: "auto",
            }
        }
    }
 }

answered Mar 04 '22 at 06:28

Rohit Thakur

49
1
7

Why down vote? For global styling and theming this is the correct answer or do I miss something? – larz Jul 26 '22 at 09:39
Out of all of the solutions, I prefer this one. – Adam Scroggin Jul 06 '23 at 21:58

Pepe Alvarez · Answer 3 · 2022-03-15T07:07:38.350

1

Modal component has a Modal prop named Id, which you can use in the component to modify it with css in the following way.

<Modal id='mymodal'>
   ...
</Modal>

The moment the page is being rendered, chakra will name the modal id in the next form: 'chakra-modal-mymodal'. Then you can target your css rules according to that.

#chakra-modal-mymodal {
    height:600px;
    // There is a max-width rule used by chakra-ui,
    // thus you need to overwrite it to make it work.
    max-width:1000px; 
}

edited Mar 15 '22 at 07:07

answered Mar 14 '22 at 21:53

Pepe Alvarez

1,218
1
9
15

the only problem with this is that i am not able to click out of the modal window to close it. – Ansub Aug 16 '22 at 11:38
@Ansub I dont remember having had that problem when using that way I described, but anyhow you now know a proper id and you have all the power of css and javascript at your disposal to make it work the way you want it to. Of course the react way would be the preferred one but you have other tools too. – Pepe Alvarez Nov 30 '22 at 16:01

score 1 · Answer 4 · answered Jun 15 '23 at 09:46

I normally just do this:

        <ModalContent
          bgColor={'transparent'}
          minWidth="fit-content"
          height="fit-content"
        >
          <ModalBody>
            <ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
          </ModalBody>
        </ModalContent>

Then I will set the widths on the child

score 0 · Answer 5 · answered Dec 07 '21 at 17:28

0

You can do something like

<Modal>
  <ModalContent h='600px' w='1000px'>
    <Box>
      Modal Content :)
    <Box>
  </ModalContent>
</Modal>

answered Dec 07 '21 at 17:28

Cva

116
1
6

score 0 · Answer 6 · answered Nov 15 '22 at 16:28

To expand on Rohit's answer: https://stackoverflow.com/a/71347392/2026508

import {
  ChakraProvider,
  extendTheme,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
} from "@chakra-ui/react";
import { H2, theme } from "@myspecialmodule/components";


// "theme" here is a custom theme, but mostly chakra defaults

const modalThemeOverride = extendTheme({
  ...theme,
  components: {
    ...theme.components,
    Modal: {
      ...theme.components.Modal,
      variants: {
        mySpecialVariant: {
          dialog: {
            borderRadius: "4px",
            marginBottom: "0px",
            maxW: '900px',
          },
        },
      },
    },
  },
});

And then:

    <ChakraProvider theme={modalThemeOverride}>
      <Modal
        key={btoa(headerCopy)}
        variant="mySpecialVariant"
        onClose={() => null}
        isOpen={isOpen}
        isCentered={true}
        size={"3xl"}
      >
        <ModalOverlay backdropFilter='blur(10px) hue-rotate(90deg)'>
          <ModalContent ml={8}>
            <Flex>
            {sideBarImg && <Box>{sideBarImg}</Box>}
            <Box p={12}>
              <ModalHeader>
                <H2>{headerCopy}</H2>
              </ModalHeader>
              <ModalBody>
                {modalBody}
                <ModalFooter pl={0} pr={0} justifyContent="flex-start">
                  {modalFooter}
                </ModalFooter>
              </ModalBody>
            </Box>
          </Flex>
          </ModalContent>
        </ModalOverlay>
      </Modal>
    </ChakraProvider>

how to make custom sized modal in chakra UI

6 Answers6