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.

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

Missing scrollbar on closing modal #424

Open
GreyingRaven opened this issue Feb 28, 2018 · 1 comment
Open

Missing scrollbar on closing modal #424

GreyingRaven opened this issue Feb 28, 2018 · 1 comment

Comments

@GreyingRaven
Copy link

  • I'm submitting a ...
    [X] bug report
    [ ] feature request
    [ ] question about the decisions made in the repository

  • What is the current behavior?
    When closing a ngx-modialog modal created while inside a bootstrap modal, the modal-open class in the body is removed so the scroll capabilities are lost.

  • If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
    http://plnkr.co/edit/MILFUmRVWHHGnFYLn7Yq?p=preview

Press Launch demo modal and once that is open click the alert button inside the modal.
When the alert modal is closed you can no longer scroll.

  • What is the expected behavior?
    I expect the generated modal not to remove modal-open if there is still another modal open

  • Please tell us about your environment:

"dependencies": {
"@angular/animations": "^5.2.2",
"@angular/common": "^5.1.1",
"@angular/compiler": "^5.1.1",
"@angular/core": "^5.1.1",
"@angular/forms": "^5.1.1",
"@angular/http": "^5.1.1",
"@angular/platform-browser": "^5.1.1",
"@angular/platform-browser-dynamic": "^5.1.1",
"@angular/router": "^5.1.1",
"@auth0/angular-jwt": "^1.0.0-beta.9",
"@types/jquery": "^3.2.18",
"angular-datatables": "^5.0.0",
"angular-font-awesome": "^3.1.2",
"angular2-jwt": "^0.2.3",
"bootstrap": "^3.3.5",
"core-js": "^2.5.1",
"datatables-bootstrap": "0.0.1",
"datatables.net": "^1.10.16",
"datatables.net-buttons": "^1.5.1",
"datatables.net-buttons-dt": "^1.5.1",
"datatables.net-dt": "^1.10.16",
"datatables.net-select": "^1.2.4",
"datatables.net-select-dt": "^1.2.4",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"jszip": "^3.1.5",
"moment": "^2.20.1",
"ng-pick-datetime": "^5.1.2",
"ng-pick-datetime-moment": "^1.0.4",
"ng2-select": "^2.0.0",
"ngx-bootstrap": "^2.0.0-rc.0",
"ngx-modialog": "^5.0.0",
"open-iconic": "^1.1.1",
"pdfmake": "^0.1.36",
"popper.js": "^1.12.9",
"pretty-checkbox": "^3.0.3",
"rxjs": "^5.5.5",
"zone.js": "^0.8.18"
},
"devDependencies": {
"@angular/cli": "1.6.1",
"@angular/compiler-cli": "^5.1.1",
"@angular/language-service": "^5.1.1",
"@types/datatables.net": "^1.10.8",
"@types/datatables.net-buttons": "^1.4.0",
"@types/datatables.net-select": "^1.2.3",
"@types/jasmine": "~2.8.2",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~8.5.1",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.2.2",
"ts-node": "~4.0.1",
"tslint": "~5.8.0",
"typescript": "^2.6.2"
}

  • Browser: Chrome , MS EDGE
  • Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
    An idea to fix this issue could be changing the bootstrap plugin as it already checks if modal-open exists before adding it.
    // add body class if this is the only dialog in the stack if (isDoc && !document.body.classList.contains('modal-open')) { document.body.classList.add('modal-open'); }

Would it be possible to add a flag so that if modal-open already exists mark the modal as a second modal so when it closes it doesn't remove modal-open
combineLatest.call(backdrop.myAnimationEnd$(), container.myAnimationEnd$(), (s1, s2) => [s1,s2]) .subscribe( sources => { isDoc && this.overlay.groupStackLength(dialogRef) === 1 && document.body.classList.remove('modal-open'); completer.resolve(); });

@gdelafosse
Copy link

in my case, the subscription is never called, I can't figure out why...
has anyone a solution for this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants