The body class should be added to the html element instead

[gavmck]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior The modal adds a class to the body when it's open and removes it when it closes.

Expected behavior The class should be added to the html element instead for better targeting of scroll prevention. Sometimes you need to prevent scroll on the html as well as the body. I am getting double scrollbars on Windows.

What is the motivation / use case for changing the behavior? You can always target the body from the html in CSS, but you cannot target the html from the body.

Please tell us about your environment: Mac OS with scrollbars set to always Windows 7

• Smart Modal version: 7.1.1

• Angular version: 8.0.0

• Browser: all

• Language: all

Thanks!

[maximelafarie]

Hi @gavmck, thank you for this issue!

Indeed, it seems it'll be better to add this class a bit higher in the DOM. I'm considering it as a breaking change given that some users may have targeted the body.dialog-open as CSS selector. Move it to html tag will break this rule.

I'll put this issue in the next release since we want to refactor a part of the app for future Angular releases. 😉

Regards! 🖖

[gavmck]

Yeah no problem, I would agree it's a breaking change as well.

Thanks for moving it up in the next release though, that will be super helpful!

[vibonacci]

Anybody found a work around for this until the change is made? Really need .dialog-open on the html tag.

UPDATE: made a PR with the fix without causing breaking change. https://github.com/maximelafarie/ngx-smart-modal/pull/316

[maximelafarie]

@vibonacci Thank you for sending us a PR, I rebased it and I'm going to test it to be sure no BC Break is present 😉 Stay tuned