? ? Pending

User tests: Successful: Unsuccessful:

avatar brianteeman
brianteeman
5 Sep 2018

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 requiresnpm run build:css and changing the language string to something long

before

chrome_2018-09-05_12-49-48

after

chrome_2018-09-05_12-45-39

avatar brianteeman brianteeman - open - 5 Sep 2018
avatar brianteeman brianteeman - change - 5 Sep 2018
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 5 Sep 2018
Category Administration Templates (admin)
avatar brianteeman brianteeman - change - 5 Sep 2018
The description was changed
avatar brianteeman brianteeman - edited - 5 Sep 2018
avatar ciar4n
ciar4n - comment - 5 Sep 2018

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.

avatar brianteeman brianteeman - change - 5 Sep 2018
Labels Added: ?
avatar brianteeman
brianteeman - comment - 5 Sep 2018

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

avatar ggppdk
ggppdk - comment - 5 Sep 2018

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

avatar brianteeman
brianteeman - comment - 5 Sep 2018

Thanks I will take a look at those links later

avatar brianteeman
brianteeman - comment - 6 Sep 2018

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

avatar joomla-cms-bot joomla-cms-bot - change - 6 Sep 2018
Category Administration Templates (admin) Administration Templates (admin) Layout
avatar brianteeman
brianteeman - comment - 6 Sep 2018

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

avatar cavo789
cavo789 - comment - 8 Sep 2018

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.

22015

avatar brianteeman
brianteeman - comment - 8 Sep 2018

@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

avatar jehacgn
jehacgn - comment - 8 Sep 2018

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.

avatar jehacgn jehacgn - test_item - 8 Sep 2018 - Tested successfully
avatar bees4ever
bees4ever - comment - 8 Sep 2018

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.

avatar bees4ever bees4ever - test_item - 8 Sep 2018 - Tested successfully
avatar franz-wohlkoenig franz-wohlkoenig - change - 8 Sep 2018
Status Pending Ready to Commit
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 8 Sep 2018

Ready to Commit after two successful tests.

avatar f-hamel
f-hamel - comment - 8 Sep 2018

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.

avatar f-hamel f-hamel - test_item - 8 Sep 2018 - Tested successfully
avatar wilsonge wilsonge - change - 8 Sep 2018
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2018-09-08 20:27:30
Closed_By wilsonge
Labels Added: ?
avatar wilsonge wilsonge - close - 8 Sep 2018
avatar wilsonge wilsonge - merge - 8 Sep 2018
avatar wilsonge
wilsonge - comment - 8 Sep 2018

Thanks guys! Nice teamwork!

avatar brianteeman
brianteeman - comment - 8 Sep 2018

thanks

Add a Comment

Login with GitHub to post a comment