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

score 1 · Answer 1 · answered Mar 10 '22 at 08:43

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.

answered Mar 10 '22 at 08:43

Quang

11
4

score -3 · Answer 2 · answered Jul 21 '20 at 14:48

-3

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

answered Jul 21 '20 at 14:48

Josh Withee

9,922
3
44
62

1

@josh_withee, how did you solve this? – Suraj Auwal Nov 12 '21 at 17:51
1

@Josh Withee I wonder the same. I have the same issue and not much info – FooBar Nov 14 '21 at 19:57
I'm with you people! OP @Josh Withee please elaborate on how you were able to fix this. – Sascha Feb 01 '22 at 16:52
I wish I had more info to share but that is all I did and the problem stopped happening. – Josh Withee Feb 02 '22 at 15:00
Has anyone figured this out, because I added the `container: 'body'` and it does not seem to do anything. – Grandizer Nov 03 '22 at 12:40
1

Seems like [this](https://popper.js.org/docs/v2/constructors/#strategy) this did the trick for me and I did not need the `container: 'body'` either. – Grandizer Nov 03 '22 at 13:07

Allow popper to go outside the boundaries of the container

2 Answers2