i'm trying to figure out how to have antd modal open and have height of 100% and width of 100%, tried different ways but always getting scroll y and x, and if i put height of 100vh then using different mobile devices it still can scroll down for some reason, so my question is how to get this modal perfectly 100% height and width without any scrollings, here is my code:

=/index.css

i'm trying to figure out how to have antd modal open and have height of 100% and width of 100%, tried different ways but always getting scroll y and x, and if i put height of 100vh then using different mobile devices it still can scroll down for some reason, so my question is how to get this modal perfectly 100% height and width without any scrollings, here is my code:

https://codesandbox.io/s/to-customize-the-width-of-modal-antd4154-forked-kfbzj?file=/index.css

• javascript
• html
• css
• reactjs
• antd

Share Improve this question Follow edited May 10, 2021 at 17:55 asked May 10, 2021 at 16:53 user10727653user10727653

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Hope this help https://codesandbox.io/s/to-customize-the-width-of-modal-antd4154-forked-mxx4j?file=/index.js

For more information:

• Change modal's width to "100vw"
• Change modal content to 100vw x 100vh with overflow auto

Please take reference from the below solution, setting below CSS worked for me: https://codesandbox.io/s/to-customize-the-width-of-modal-antd4154-forked-r0e0k?file=/index.css

.ant-modal {
  width: 100%;
  transform-origin: 85px 43px;
  overflow: hidden;
  height: -webkit-fill-available;
}