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

Opening another Modal from a Modal breaks body scrolling #1325

Closed
IlyaSemenov opened this Issue Nov 10, 2017 · 4 comments

Comments

Projects
None yet
3 participants
@IlyaSemenov
Contributor

IlyaSemenov commented Nov 10, 2017

Steps to reproduce

  1. Create two <b-modal>.
  2. Open first modal.
  3. While the first modal is opened, trigger opening the second modal.

Actual result

  1. First modal hides
  2. Second modal shows
  3. Background body becomes scrollable

Expected result

  1. First modal hides
  2. Second modal shows
  3. Background body stays fixed

Example

See this jsfiddle: https://jsfiddle.net/semenov/ngdr0gtk/

  1. Click "Show Modal 1"
  2. Ensure that the long background doesn't scroll
  3. Click "Show Modal 2"
  4. Observe that the long background becomes scrollable

Environment

  • Chrome 62 under macOS (latest)
  • Vue 2.5.3 (latest)
  • bootstrap-vue 1.0.2 (latest)
  • bootstrap 4.0.0-beta.2 (latest)

Workaround

The simple (but ugly) workaround is to manually hide the currently opened modal, and open the second modal with setTimeout. Note that the timeout must be reasonably large, in the sense that 0 (or $nextTick) or even 100 is not enough. Possibly, it has something to do with the animation.

@mosinve

This comment has been minimized.

Member

mosinve commented Nov 10, 2017

Bootstrap-Vue uses Bootstrap css, as you sure know.
So, please read this https://getbootstrap.com/docs/4.0/components/modal/#how-it-works, especially 3rd bullet

@IlyaSemenov

This comment has been minimized.

Contributor

IlyaSemenov commented Nov 10, 2017

Sure, I am aware of that. I am not trying to show two modals at the same time. I simply want to switch between two modals (e.g. login and registration dialogs). After all, it works almost perfectly with bootstrap-vue other than that background scroll issue.

@IlyaSemenov

This comment has been minimized.

Contributor

IlyaSemenov commented Nov 10, 2017

I understand that bootstrap-vue is mostly a thin wrapper, however I think everyone would win if it handled this use case automatically with some Javascript magic (after all, that's why we use Vue in the first place). I don't think switching between modals is a very rare case.

IlyaSemenov added a commit to IlyaSemenov/bootstrap-vue that referenced this issue Nov 10, 2017

tmorehouse added a commit that referenced this issue Nov 10, 2017

fix(modal): modal-open body class lost when switching between modals (#…
…1327)

* modal: fix modal-open body class lost on modal switch (#1325)

* Update modal.vue
@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Nov 18, 2017

Should be addressed in release v1.1.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment