Popper fallback leads to worse layouting

[septatrix]

Commit f132400 introduced a regression (or at least I would classify it as such).
Dropdowns close to the right screen edge overflow instead of being show the the left.
I simply used a textarea and the example code from the docs with an inline utility class.
This allows me to simple move the button to the right edge.

The following screenshots show the behaviour (with the black area being the devtools).

Dropdown not shown

Dropdown behaviour after the commit.

Dropdown behaviour before the commit.

---

• Operating system and version: Linux - Ubuntu 20.10
• Browser and version: Chrome 87

I am unable to give an example to reproduce as the changed code is not yet in a release (and I currently do not have the time to compile and self-host).

[XhmikosR]

Should be fixed by #32437 already, /CC @rohit2sharma95

[rohit2sharma95]

@septatrix can you please create a reduced test case via CodePen or JS Bin 🙂
@XhmikosR That PR is just for Tooltip/Popover and updates the docs and default value. Although, default fallback placement has been changed in dropdown also and should be mentioned in the docs.

[XhmikosR]

Oh, indeed. Can you make a PR referencing the PR that changed it and adapting the docs later please?

[septatrix]

Test: https://jsbin.com/nabugatehu/edit?html,output (Output panel was set to 1200px width)

As explained earlier I had to compile the current state of the main branch as it is not in npm yet.
To switch between the beta-1 release and the current state of main (which still has the regression) toggle the comments in the header.
The referenced files were generated by running npm run dist and uploaded to a fork.

[ghost]

Happens to me too.

[ghost]

You could try the float : left; in CSS with the class to fix the issue @septatrix

[septatrix]

Disabling right: auto!important; for .dropdown-menu[style] seems to fix the issue partially. It leads to a better result than currently but still worse than beta-1 IMO.

[septatrix]

Disabling right: auto!important; for .dropdown-menu[style] seems to fix the issue partially. It leads to a better result than currently but still worse than beta-1 IMO.

This is also a suggested fix for #32484

[rohit2sharma95]

Fixed in #32843 and #32986

https://jsbin.com/goparegilu/edit?html,output