'Allow popper to go outside the boundaries of the container

I am using popper.js on the items in a custom-built dropdown menu (it's not a <select>). The site uses Bootstrap 4.

My poppers look like this, but I want it to overflow outside of the scrolling container:

enter image description here

I want the poppers to appear on the right-hand side of the elements in the scrolling container, but they are forced to stay inside of it. The scrolling container is a <div>.

Why don't these settings allow the poppers to overflow?:

const indivOptionPopOverSettings = {
        placement: 'left',
        container: 'body',
        trigger: 'hover',
        html: true,
        modifiers: {
            preventOverflow: {
                // tried these individually and in various combinations:
                enabled: false,
                boundariesElement: 'window',
                escapeWithReference: true
            }
        }
};
popper.js


Solution 1:[1]

The "container: 'body'" attribute allows the pop-over box to be put directly under the body tag and not the div tag hence resolving the issue.

Solution 2:[2]

The problem went away after I closed my browser entirely and restarted the application. I'm not sure what the root problem was.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Quang
Solution 2 Josh Withee

Related Questions