Search code examples
cssreactjsantd

White box appearing at the bottom of the page when using antd Modal on mobile Firefox

I am using antd with React. I have a couple of Modals in my code. They work perfectly fine on web Chrome and Firefox as well as on mobile Chrome. However when using Firefox on mobile, I get a white box at the bottom of the page. Any ideas?

.ant-layout {
  min-height: 100vh;
  background: @background;
  padding: 0 1.8em 1.5em 1.8em;
}

.ant-layout-content {
  padding: 0 2em 1.5em 2em;
}

@media only screen and (max-width: 730px) {
  .ant-layout-content {
    padding: 0;
  }
}

header.ant-layout-header {
  padding: 0;
  margin-bottom: 2em;
  background-color: transparent;
  color: white;
}

footer.ant-layout-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: @primary;
  color: @white;
  text-align: center;
}

.ant-modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

.ant-modal-body::-webkit-scrollbar {
  width: 12px;
}

enter image description here

Solution

  • By default when ant design renders Modals. It renders them inside <Body />. Which could create an issue with overflow. Try to render modal inside, the first child of the body element (it could be #root). It should work.

    To target the #root element you need to use getContainer function from ant design.

    <Modal getContainer="#root" ... />

    https://ant.design/components/modal/#API -> search for getContainer