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

Always-on scroll breaks Modal padding #1409

Open
octylFractal opened this issue Feb 19, 2019 · 4 comments
Open

Always-on scroll breaks Modal padding #1409

octylFractal opened this issue Feb 19, 2019 · 4 comments

Comments

@octylFractal
Copy link

  • components: Modal
  • reactstrap version 7.1.0
  • import method umd, not full
  • react version 16.8.1
  • bootstrap version 4.2.1

What is happening?

I set overflow-y: scroll on my <body> tag to prevent an appearing scrollbar from moving my content. Unfortunately, it seems that Modal does not take this in to account, and attempts to add padding to compensate for a disappearance that never occurs, since it does not unset overflow-y: scroll and the scrollbar remains.

What should be happening?

I'm not sure if Modal should simply not add the padding in this case, or if it should unset overflow-y: scroll and restore it later, but one of these two things needs to happen.

Steps to reproduce issue

  1. Add overflow-y: scroll to <body>
  2. Open a Modal using reactstrap.
  3. Notice odd extra padding on body, shifting any full-page-width content left.

Code

Click open/close the modal and watch the div box.
https://stackblitz.com/edit/reactstrap-4rasul?file=index.html
@octylFractal octylFractal mentioned this issue Feb 19, 2019
Closed
@GoPro16
Copy link
Member

GoPro16 commented Feb 23, 2019

After viewing the code sandbox link and trying in a local project I am not able to reproduce this issue. This may be an issue in your application itself as there may be some other custom css you have causing this issue.

@octylFractal
Copy link
Author

I have tried this in the sandbox link, so perhaps it is OS and browser dependent. I am using Ubuntu 18.10 and Chrome.

@emckay
Copy link

emckay commented Mar 10, 2019 •
edited
Loading

This also happens for me on Ubuntu 18 and Chrome. The problem happens in my app when there is a scrollbar on the page naturally -- not only when overflow-y: scroll is set on the body.

I also see the issue in the sandbox link posted in the original issue.

Here's a video showing what I see:

reactstrap-4rasul - StackBlitz - Edited

@krnlde
Copy link
Contributor

krnlde commented Jul 28, 2020 •
edited
Loading

I can reproduce this the same way as mentioned above using "reactstrap": "8.5.1"

Edit: Sorry, the above example works and removes the padding correctly. But with a few tweaks it breaks. Opening 2 consecutive modals in a row produces the <body style="...; padding-right: 16px;"> after closing the second modal.

Tested on Windows 10 with Chromium Edge 86.0.587.0, Google Chrome Version 84.0.4147.105 and Firefox 78.0.2

See & reproduce here: https://stackblitz.com/edit/reactstrap-j6vjaz

I'm pretty sure it has something to do with the position of this line:

reactstrap/src/Modal.js

Line 301 in aa63f99

this._originalBodyPadding = getOriginalBodyPadding();

It remembers only the last padding, but if the last padding was already altered by a previous modal it'll be wrong. It should only do it when there is no open modal, e.g. if (Modal.openCount === 0) a few lines later.

Hope this helps.

/ping @GoPro16

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@emckay @krnlde @octylFractal @GoPro16