Popper.js messing up dropdown styles

[myplaneticket]

Loving the new popper.js but was wondering if there was a way to disable the custom styles it auto adds to elements?

Its adding the following:

    position: absolute;
    transform: translate3d(0px, 0px, 0px);
    top: 0px;
    left: 0px;
    will-change: transform;

This in turn overrides some custom animations I am trying to implement, it also messes up alignment if I wanted to put dropddowns in a container. The plugin is great but there must be a way to disable this custom "hardcode" style feature?

[FezVrasta]

These styles are the ones needed to actually position the dropdown. Without them the dropdown would not be positioned.

[Johann-S]

Yep but that's possible to disable Popper.js style we did it when Dropdown are in a navbar so why not add a feature to allow folks to do that

[FezVrasta]

But then what's the point to use a dropdown?

[Johann-S]

Yep I agree they won't take any advantage of Popper.js

[mdo]

Perhaps @myorangeca can elaborate on the custom animations being applied so we can see what properties conflict? I definitely understand the desire to customize animations for positioned elements.

[FezVrasta]

It's probably because of the transform property. Ideally dropdowns should allow an intermediate wrapper people can use to apply custom css and animations to it.

Doing so the outer most wrapper is used for the position and the inner one for the animations

[myplaneticket]

I have customized the dropdown to do the following animation below. I had to use !important style to override popper.js styles (clearly not the best solution).

.show > .dropdown-menu {
    -moz-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    moz-transform-origin: 29px -50px;
    -o-transform-origin: 29px -50px;
    -ms-transform-origin: 29px -50px;
    -webkit-transform-origin: 29px -50px;
    transform-origin: 29px -50px;
    opacity: 1;
    visibility: visible;
}

.dropdown-menu {
    -moz-transform: scale(0.8) !important;
    -o-transform: scale(0.8) !important;
    -ms-transform: scale(0.8) !important;
    -webkit-transform: scale(0.8) !important;
    transform: scale(0.8) !important;
    transition: all 400ms ease-in;
    opacity: 0;
    visibility: hidden;
    display: block;
}

.dropdown-menu-custom {
    right: 15px !important;
    top: 59px !important;
    left: auto !important;
}

Where I understand that popper inserts these classes dynamically to position the dropdown, but it causes problems if the dropdown is inside some container or in a nav bar with 'boxed layout view'

I think popper.js should have an option to check elements with certain data attributes (ie data-popper-static) to ignore hardcoded styles for that particular element.

[myplaneticket]

Would like to add, if I have any custom scroll plugins inside any dropdowns (ie. slimscroll.js), popper's custom style messes up the plugin from being rendered (translate3d bug maybe). We will be needing some form of control to disable the plugins ability to add custom styles for some elements.

[FezVrasta]

@myorangeca may you open an issue on the popper.js repo about the scroll plugins? I use a scroll plugin in the demo website popper.js.org and works just fine

[myplaneticket]

@FezVrasta I might just do that. But don't you think a css solution would be more prefered over a JS solution. And the option to disable the popper's custom style might be needed in some cases?

[mdo]

But don't you think a css solution would be more prefered over a JS solution. And the option to disable the popper's custom style might be needed in some cases?

I'm a yes on both accounts, for what it's worth.

[klasjersevi]

You can just turn off the transform placement on Popper to make it only use top/left for positioning instead. Then you can use transform for any animations/transitions as you wish.

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = false;

[myplaneticket]

@klaslundberg thanks for that! I still think there should be an option via data-tooltip to disable this;

[jmdfm]

This hurt me for several hours today as well, trying to figure out why all my dropdown animations suddenly started going crazy. A lot of people are going to want to animate their dropdowns...

[logolevel]

my dropdown list was flying all over the document), the problem solved only by turning off the computeStyle

Popper.Defaults.modifiers.computeStyle.enabled = false;

[myplaneticket]

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = false no longer works when used popper in bootstrap.bundle.js

[vparandii]

@logolevel's hack works! Thx!

[leitocardoso]

In Bootstrap >=4.1 there is an 'data-display="static"' attribute that you could add to the toggle element. That way Popper wont mess with de position of that dropdown specifically.

[marcond05]

Thank you for the breadcrumb @leitocardoso . This does indeed prevent any inlines styles, thank you. Doc - https://getbootstrap.com/docs/4.2/components/dropdowns/#responsive-alignment

FWIW, just upgraded to bootstrap 4.2 and was really surprised to find this. This should live in the core SASS bundle, like everything else, not controlled by JS (other than class toggling).

[sidrafarooq]

@leitocardoso thank you very much ..

[arifszn]

'data-display="static"

This solved my issue. Thanks a lot.

[miguelgisbert]

I have customized the dropdown to do the following animation below. I had to use !important style to override popper.js styles (clearly not the best solution).

.show > .dropdown-menu {
    -moz-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    moz-transform-origin: 29px -50px;
    -o-transform-origin: 29px -50px;
    -ms-transform-origin: 29px -50px;
    -webkit-transform-origin: 29px -50px;
    transform-origin: 29px -50px;
    opacity: 1;
    visibility: visible;
}

.dropdown-menu {
    -moz-transform: scale(0.8) !important;
    -o-transform: scale(0.8) !important;
    -ms-transform: scale(0.8) !important;
    -webkit-transform: scale(0.8) !important;
    transform: scale(0.8) !important;
    transition: all 400ms ease-in;
    opacity: 0;
    visibility: hidden;
    display: block;
}

.dropdown-menu-custom {
    right: 15px !important;
    top: 59px !important;
    left: auto !important;
}

Where I understand that popper inserts these classes dynamically to position the dropdown, but it causes problems if the dropdown is inside some container or in a nav bar with 'boxed layout view'

I think popper.js should have an option to check elements with certain data attributes (ie data-popper-static) to ignore hardcoded styles for that particular element.

That worked for me! thank you
.show > .dropdown-menu{ transform: translate3d(0px, 106px, 0px)!important; }