Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Should modal always be appened to document.body?
See original GitHub issueMy app consists of various sidebar / menubar with various z-index / position CSS parameters. When I use b-modal inside my component, it tries to render the dialog inside the div where the child component is located which might be buried under other div / scroll bars, etc.
It looks like I can fix this simply by moving the b-modal to document.body via mounted() hook on the component that’s hosting the dialog
mounted() {
document.body.appendChild(this.$refs.modal.$el);
},
My app now looks like this.
My question is, shouldn’t the modal always be moved to the body for it to be rendered as designed? (Or at least moved to body by default while allowing user to not move it if they so choose via b-modal option?)
Issue Analytics
- State:
- Created 6 years ago
- Reactions:4
- Comments:15 (9 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@soichih the next release of BootstrapVue (next release after 2.0.0-rc.19) will be using PortalVue to render the modal appended to the
<body>element, by default (and modals will always be rendered lazily by default).The issue with fix-positioned parent containers is documented in Bootstrap V4 (and V3) https://getbootstrap.com/docs/4.0/components/modal/#how-it-works:
Since Bootstrap-Vue is based on Boostrap V4.beta CSS, it inherits the issues associated with Boostrap V4.beta’s CSS.
Basically, place your modal (or
<b-modal>) component outside of any fixed position containers.