Allow popper to go outside the boundaries of the container

Question

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:

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
            }
        }
};

Morale

Answer 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.

Chante

Answer 2

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

Morale

@josh_withee, how did you solve this? – Hibernate

@Josh Withee I wonder the same. I have the same issue and not much info – Electrothermics

I'm with you people! OP @Josh Withee please elaborate on how you were able to fix this. – Messaline

I wish I had more info to share but that is all I did and the problem stopped happening. – Morale

Has anyone figured this out, because I added the container: 'body' and it does not seem to do anything. – Valentinavalentine

Seems like this this did the trick for me and I did not need the container: 'body' either. – Valentinavalentine