I'm trying to edit the position of a dropdown element but I can't seem to get it to work. I'm using Bootstrap 4 with Popper.js and I just added a default dropdown without any alternative styles to my page, but it automatically adds the following to the style attribute of the dropdown:
position: absolute;
transform: translate3d(4px, 90px, 0px);
top: 0px;
left: 0px;
will-change: transform;
Now I want to change the transformed position and I tried this with a custom style and adding '!important' but no results so far.
My trigger+dropdown:
<a href="#" class="account_nav_link" role="button" id="dropdownAccount" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="account_nav_icon fab fa-accessible-icon"></i>
</a>
<div class="dropdown-menu dropdown_account" id="dropdownAccount-menu" aria-labelledby="dropdownAccount">
<span class="dropdown_arrow"></span>
<div class="dropdown_wrap">
<ul class="dropdown_nav">
<li class="content_item"></li>
<li class="content_item"></li>
</ul>
</div>
</div>
I also tried the following solution using JS I found on github but also without any result. Can anyone please help me with this?
var reference = $('#dropdownAccount');
var popper = $('#dropdownAccount-menu');
var anotherPopper = new Popper(
reference,
popper,
{
modifiers: {
computeStyle: {enabled: false, gpuAcceleration: false},
},
}
);
I am not sure if this will work for you, but here is my story:
I, too, use BS4 with popper.js. The transform property works just fine for me in most cases. However, in mobile view at a screen width of 478px or below, it was scrolling off screen a bit because it was offsetting slightly to the right.
So all I did was inspect the site code to find the transform element values which were originally set for my dropdown as:
transform: translate3d(5px, 38px, 0px);
And added to my stylesheet a media query to override it along with:
.dropdown-menu {
transform: translate3d(0px, 38px, 0px) !important;
}
Maybe something along these lines will work for you, too, in your stylesheet (obviously change the values up from my own with your values). I just didn't want to sit there tampering with scripts when this was the quickest solution for me to achieve within my stylesheet with just a few lines of code instead.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With