5

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

        }
    );
Mikelo
  • 271
  • 2
  • 16

2 Answers2

1

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.

Nancy
  • 522
  • 4
  • 15
  • The default 5px padding comes from this: https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.padding You can remove it with the modifier: `modifiers.preventOverflow.padding = 0` – cchambers Jul 26 '19 at 18:48
0

You can add attributes data-display="static" to tag a, it will not automatically adds that style attributes to dropdown menu.

<a href="#" data-display="static" 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>

You can visit https://getbootstrap.com/docs/4.5/components/dropdowns/#options to learn more details.

Cloneable
  • 1