ngx-bootstrap model scrolls to top of document

Question

I'm using ngx-bootstrap modals in a project that displays enough on the page the content scrolls vertically. Whenever a modal is opened the document body scrolls to the top instead of leaving the position alone, which is the expected behavior.

I can manually set overflow: auto on the body in the dev console to resolve this behavior. That is, once set, opening modals no longer scrolls to the top of the document body. However, adding this css to my component did not apply to the body. Changing the bootstrap css files in the node_modules folder also did not work. Bootstrap continues to set overflow: hidden and my component css file does not apply body { overflow: auto !important; } though it does successfully apply the other defined styles.

Any suggestions?

No, though I may be looking at this again in the near future. — Dan, Mar 14 '20 at 19:49
I solved it putting this in the style.css body { overflow: auto; } Also I had the html tag with that style too and I removed it to make it work. — Jeannuel, Mar 16 '20 at 21:44

score 0 · Answer 1 · answered Jul 18 '18 at 01:30

0

did you import @ngx-bootstrap in .ts file you are gonna use?

answered Jul 18 '18 at 01:30

dev-assassin

271
2
13

Yes, I'm using `import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';` – Dan Jul 18 '18 at 21:08

ngx-bootstrap model scrolls to top of document

1 Answers1