Please provide an example of appending a `.dropdown-menu` to `body` (to allow overflowing a scrollable parent).

Documentation issue

• Reporting a typo
• Reporting a documentation bug
• Documentation improvement
• Documentation feedback

Is there a specific documentation page you are reporting?

https://bootstrap-vue.org/docs/components/dropdown#advanced-popperjs-configuration

Additional context or description

I’ve been trying to append the .dropdown-menu to body element to allow it to overflow a parent with overflow:hidden without any success. I tried to use both boundary and :popper-opts.

In boundary I tried to pass

• 'window',
• 'viewport'
• a body reference: computed: { body: () => document.body }.
• also tried computed: { appRef: () => document.querySelector('#app') }.

I also tried to peak into source code to see what popper-opts expects (as Popper.js documentation is too cryptic for me), but wasn’t able to pinpoint it into the bootstrap-vue package.

Is there an example anywhere of how this could be achieved?

[cdauth]

Another solution that I found that seems to work much better is to set :popper-opts="{ positionFixed: true }" on the dropdown element.

[cdauth]

I think it would be nice for this to be fixed, either by introducing a positioning mechanism that works universally or by at least documenting a workaround. Dropdown positioning is quite painful at the moment.