Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
559 views
in Technique[技术] by (71.8m points)

css - 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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...