Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Modal width out of screen #25765

Merged
merged 8 commits into from
Sep 3, 2020
Merged

fix: Modal width out of screen #25765

merged 8 commits into from
Sep 3, 2020

Conversation

tanmoyopenroot
Copy link
Contributor

@tanmoyopenroot tanmoyopenroot commented Jul 23, 2020 •
edited by afc163
Loading

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

closes #25554

💡 Background and solution

When then width of the browser is less than 1000 and when width prop is added with a value of 1000, a scrollbar appears.

Added max-width to the modal to fix the problem

Screenshot 2020-07-23 at 7 04 11 AM

📝 Changelog

Language Changelog
🇺🇸 English Fix Modal jump out of screen in some situations.
🇨🇳 Chinese 修复 Modal 在某些情况下溢出视窗的问题。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is not needed
  • Demo is provided
  • TypeScript definition is not needed
  • Changelog is provided

View rendered components/modal/demo/width.md

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jul 23, 2020 •
edited
Loading

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jul 23, 2020 •
edited
Loading

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 23, 2020 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 28ec6e3:

Sandbox Source
antd reproduction template Configuration

@07akioni
Copy link
Contributor

Can overlayStyle={{ maxWidth: 1000 }} work?

@tanmoyopenroot
Copy link
Contributor Author

Can overlayStyle={{ maxWidth: 1000 }} work?

I don't think it will work with maxWidth: 1000 should be in terms of percentage like max-width: 100%, so that it does not overflow when modal width is more than the browser.

07akioni
07akioni reviewed Jul 23, 2020
View reviewed changes
Copy link
Contributor

@07akioni 07akioni left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the white-space is still the problem. if i want to keep the modal width and write
<Modal overlayStyle={{ maxWidth: 'unset' }} width={998} />. it will still jumps out of screen.

components/modal/style/modal.less Outdated
@@ -96,7 +98,8 @@
padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
text-align: right;
background: @modal-footer-bg;
border-top: @modal-footer-border-width @modal-footer-border-style @modal-footer-border-color-split;
border-top: @modal-footer-border-width @modal-footer-border-style
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

keep original style

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be formatted by prettier.

components/modal/style/modal.less Outdated
@@ -81,7 +82,8 @@
padding: @modal-header-padding;
color: @text-color;
background: @modal-header-bg;
border-bottom: @modal-header-border-width @modal-header-border-style @modal-header-border-color-split;
border-bottom: @modal-header-border-width @modal-header-border-style
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

keep original style

@tanmoyopenroot
Copy link
Contributor Author

tanmoyopenroot commented Jul 23, 2020 •
edited
Loading

<Modal overlayStyle={{ maxWidth: 'unset' }} width={998} />. it will still jumps out of screen.

Well, if we unset the maxWidth, then it's gonna take the value from the width prop.
Thereby causing an overflow when the browser width is less than 998.

@07akioni
Copy link
Contributor

<Modal overlayStyle={{ maxWidth: 'unset' }} width={998} />. it will still jumps out of screen.

Well, if we unset the maxWidth, then it's gonna take the value from the width prop.
Thereby causing an overflow when the browser width is less than 998.

I mean in this case, the current implementation still not enough.

You should set container's white-space to nowrap and body's white-space to unset. Checkout the original issue and take a look at his solution.

These fixes can be integrated.

@afc163 afc163 changed the title fix: handle custom modal width fix: Modal width out of screen Sep 3, 2020
@codecov
Copy link

codecov bot commented Sep 3, 2020 •
edited
Loading

Codecov Report

Merging #25765 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master   #25765   +/-   ##
=======================================
  Coverage   99.82%   99.82%           
=======================================
  Files         383      383           
  Lines        7343     7343           
  Branches     2054     2003   -51     
=======================================
  Hits         7330     7330           
  Misses         13       13

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a409f31...28ec6e3. Read the comment docs.

@afc163 afc163 merged commit 6d28542 into ant-design:master Sep 3, 2020
@pr-triage pr-triage bot added the PR: merged label Sep 3, 2020
@chenshuai2144 chenshuai2144 mentioned this pull request Sep 6, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@07akioni 07akioni 07akioni left review comments

@afc163 afc163 afc163 left review comments

Assignees
No one assigned
Labels
Inactive
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Modal jumps out of screen
4 participants
@tanmoyopenroot @ant-design-bot @07akioni @afc163