fix(css): .dropdown-menu-right positioning

[zalog]

This is a fix for placing .dropdown-menu-right on the right position for .navbar and override Popper.js.

Problem: http://output.jsbin.com/sozuva/1
This PR: https://codepen.io/zalog/pen/BREOMv

cc #22636, #22640, #22699

[mdo]

I don't understand what this fixes exactly. The problem link here has no .dropdown-menu-right on the .dropdown-menu, and you shouldn't need any additional styles to override that since our navbar uses static positioning for dropdowns in narrower viewports.

[Johann-S]

The jsbin use Tether and is outdated.
With our last dist file this is what we get : https://codepen.io/Johann-S/full/Pmgado/

[zalog]

Click on "Dropdown link", the bug is still there.
Please take a look on my pens:
before: https://codepen.io/zalog/pen/pPmzaE
after: https://codepen.io/zalog/pen/BREOMv

css is generated local: npm run css-compile & npm run css-prefix
js files loaded from cdnjs & rawgit. I used Popper.js 1.9.9

I rebased my branch.

[Johann-S]

Yes it fixed the issue but on the last navbar for me static position should be applied only for narrower viewports.

[zalog]

That's a navbar that always collapse, a mobile style. I think the default behaviour for .dropdown-menu should open static on all the viewports sizes.
I belive it's much cleaner this way.

Or perhaps we find a way to get popper.js manage this, but I think we don't want all this mess on js.

I don't like override popper.js or use !important eighter...

@mdo, have some thoughts?

[mdo]

Ugh, yeah, we should work with the Popper team to get some better support for controlling the styles here. Having all these overrides kinda sucks. Ideally, instead of position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform; on every default dropdown, we apply as little as possible. There's no need for any of these given our CSS.

I'm unsure how best to rectify this in short order though.

[Johann-S]

Maybe @FezVrasta have some ideas how we can handle that in a short term

[FezVrasta]

Hey, Popper.js "team" here (😂).

If you want to make Popper.js apply only some specific styles you can inject a modifier before the applyStyle one and strip any unwanted properties from the styles object.

But in my opinion you should override the applyStyles modifier all together and create one that reads the class applied to the popper element and applies the needed styles accordingly

[Johann-S]

I will try to be a bit more precise :
- For me here they are no problem of positionning by Popper.js
- The problem is present on the first two navbars because of those lines : _navbar.scss#L79-L82 and _navbar.scss#L160-L162. Without those lines they are no problem of positionning
- What I currently don't understand is on those lines _navbar.scss#L79-L82 we add a static position without taking into account : it's for all the different viewports/breakpoint.
When I track the history of this file (_navbar.scss) we can see (ba2352c#diff-df1f74faf207a474f1d78c86393221c8) they were only one css rule where position were static and it was in a certain breakpoint and not for all the viewports/breakpoints 🤔 (maybe I misunderstood something here)

Maybe someone can help me to understand why now it's needed to have a static position for all the viewports/breakpoint and before it wasn't the case and they wasn't any issues about that.

Edit :
I spoke with @zalog on Slack and I understand all the problem 😄

[Johann-S]

I made a commit (see : ca60fe4) which reset Popper.js styles for Dropdowns in Navbar.
I don't know if it's the best solution but it fix our issue.

I post that here because I hope some feedbacks or ideas

[zalog]

We have now 2 ways of fixing this:

• this PR fix(css): .dropdown-menu-right positioning #22707 - the css way with !important
• Johann's branch with some optimisations Some .navbar .dropdown-menu optimisation #22776

In my opinion we shoud step the Johann way :)

[Johann-S]

Superseded by #22782