-
-
Notifications
You must be signed in to change notification settings - Fork 174
Closed
Labels
compatibility enhancementFeature missing that is in bootstrap.js v5 or bootstrap-vue v2Feature missing that is in bootstrap.js v5 or bootstrap-vue v2stale-exemptUse this to prevent auto-stalling of an issueUse this to prevent auto-stalling of an issue
Description
Missing feature is from
bootstrap-vue
Docs
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.
IGx89
Metadata
Metadata
Assignees
Labels
compatibility enhancementFeature missing that is in bootstrap.js v5 or bootstrap-vue v2Feature missing that is in bootstrap.js v5 or bootstrap-vue v2stale-exemptUse this to prevent auto-stalling of an issueUse this to prevent auto-stalling of an issue