Skip to content

Content shifts right/left when modal opens/closes on pages with a vertical scrollbar. #1953

@ddanger

Description

@ddanger

Missing feature is from

bootstrap-vue

Docs

https://bootstrap-vue.org/docs/components/modal

Describe the missing feature

Bootstrap and BootstrapVue modals have code that adjusts the content on the page when modals are opened/closed so it appears content does not move despite the scrollbar disappearing when the modal is open.

To Recreate

  • set your OS to always show scrollbars
    • on Mac: System Settings -> Appearance -> Show scroll bars -> Always
  • navigate to the bootstrap-vue modal docs and verify you have a vertical scrollbar visible on the page
  • click the "Launch demo modal" button to see correct behavior
  • navigate to the bootstrap-vue-next modal docs and verify you have a vertical scrollbar visible on the page
  • click the "Toggle modal" button
  • EXPECT: content to remain in place
  • ACTUAL: content shifts right

Insufficient Workaround
Setting bodyScrolling to true hides the problem by keeping the scrollbar in place and allowing users to scroll the page under the overlay while the modal is open. But many would consider this a negative user-experience.

Link to BootstrapVue Implementation
The code that handles this in BootstrapVue appears to be here. (See the modalCount watcher and getScrollbarWidth(), setScrollbar(), and resetScrollbar().

Validations

  • Have tested with the latest version. This is still alpha version and sometime things change rapidly.
  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided link is to the documentation of the missing feature.

Metadata

Metadata

Assignees

No one assigned

    Labels

    compatibility enhancementFeature missing that is in bootstrap.js v5 or bootstrap-vue v2stale-exemptUse this to prevent auto-stalling of an issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions