[4.0] Dropdown menu overflow

[brianteeman]

PR for #22012

As seen in the screenshot if the menu text is too long it breaks out of the dropdown. This PR fixes that. Note it doesn't fix the left alignment

@ciar4n nany suggestions

testing requires npm run build:css and changing the language string to something long

before

after

[ciar4n]

Appears to be some js applying the following inline styling to the dropdown...

transform: translate3d(-9px, 37px, 0px);

It is that -9px misaligning the dropdown. Javascript is really not my forte, so I have no idea where that should be changed.

[brianteeman]

@ciar4n I can't even find the js that is doing that :(

[ggppdk]

It is

fileOverview Kickass library to create and place poppers near their reference elements

inside file
media/vendor/bootstrap/js/bootstrap.bundle.js

There was an issue to allow disabling these inline style via JS
so that people can customize positioning themselves

twbs/bootstrap#23378 (Popper.js messing up dropdown styles)
thus they added support for
data-display="static"
with
twbs/bootstrap#24092

So we can add data-display="static" after data-toggle="dropdown" to the layout file to disable it
and then use our custom CSS , to control positioning of the drop down

https://github.com/joomla/joomla-cms/blob/4.0-dev/layouts/joomla/toolbar/dropdown.php#L36

Documentation has not been updated yet ???
https://getbootstrap.com/docs/4.0/components/dropdowns/

You can see data-display="static" here:
https://github.com/twbs/bootstrap/blob/9f742114840e71fd6557ca4fca3dcaaf72452f6d/docs/4.0/components/dropdowns.md

then use something like

.btn-group .dropdown-menu {
    ....
    left: auto;
    right: auto;
    width: auto;
}

which will should also fix current positioning problem for RTL too

[brianteeman]

Thanks I will take a look at those links later

[brianteeman]

Documentation has not been updated yet ???

It has but this is only for BS 4.1 so the link is https://getbootstrap.com/docs/4.1/components/dropdowns/#dropdown-options

[brianteeman]

Updated PR and original post. Thanks @ggppdk for pointing me in the correct direction

[cavo789]

I've tested before and once the patch has been apply with Patch tester and I've not see any difference.

The width could be just a little larger in order to correctly display the last letter with a little space to the right.

[brianteeman]

@cavo789 https://github.com/joomla/joomla-cms/tree/4.0-dev#how-to-get-a-working-installation-from-the-source

You can not use patchtester alone for testing if/when there are css or js changes as I wrote in the original post

[jehacgn]

I have tested this item ✅ successfully on 66ec5ee

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22015.}

[bees4ever]

I have tested this item ✅ successfully on 66ec5ee

Menu Box autosizes with text length as expected.
Also working in other views

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22015.}

[ghost]

Ready to Commit after two successful tests.

[ghost]

I have tested this item ✅ successfully on 66ec5ee

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/22015.}

[wilsonge]

Thanks guys! Nice teamwork!

[brianteeman]

thanks