Ngx-bootstrap: feat(modals): add support for nested modals (Modal removes the scrollbar to add its own)

Created on 26 Aug 2016 · 7Comments · Source: valor-software/ngx-bootstrap

When I do open a modal on a page which has a scrollbar, the page is shifted to the right, as the page scrollbar is removed, then shifted back to the left (if the modal has its own scrollbar) which makes the whole thing very wonky.
It looks like opening a modal set overflow: hidden on the body tag (.modal-open class), and then add its own overflow-y: visible.
The same thing happens if you do close the modal.

I am yet to find a way to avoid this wonkyness. While the whole behavior makes sense, I am not sure how to prevent seeing the scrollbar switch.

comp(modal)

Source

Scipionh

👍2

Most helpful comment

Better workaround is to use in the main CSS:

.modal-open {
  overflow-y: auto;
}

Martin-Wegner on 24 Mar 2017

👍2

All 7 comments

Connected to the issue is if you have a modal that has a scroll and you open another modal on top of it, then after closing the topmost one, scrollbar for the first modal does not return and you can no longer scroll it (not tested in 1.1, is present in 1.0.24).
My typical use case of double modals:
... => edit item => modal dialog => changes to the item => are-you-sure modal => action => ...

PRR24 on 1 Sep 2016

👍1

nested modal, this use case not covered in twitter bootstrap, so this behavior simply not supported yet :)

valorkin on 2 Sep 2016

nested modal, this use case not covered in twitter bootstrap, so this
behavior simply not supported yet :)

You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/valor-software/ng2-bootstrap/issues/896#issuecomment-244388334

sioquim on 8 Oct 2016

The first issue (page has scrollbars which disappear when opening a model) is very annoying :(

Workaround:

<body style="overflow-y: visible !important;">

Martin-Wegner on 6 Jan 2017

Any update on this? I have Modal A which opens Modal B, but Modal B is bigger than Modal A, so it only shows up as big as Modal A, and has a vertical scrollbar. I think it should instead be appended to the body outside of Modal A.
Thanks