This is concerning the lines in the dropdown.js:
if ($(parent).hasClass(ClassName.DROPUP)) {
if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) {
element = parent;
}
}
which landed in 70f4a30
I'm not sure why the code is so explicit in declaring the element parent to be used in popper for this exact circumstance. It makes for some frustrating styling.
See example here, which is extremely ugly looking visually but I have provided to make clear the issue:
https://jsfiddle.net/g09bzzzw/18/
You can see that the first dropdown runs as expected, the menu is aligned to the button, everything is great.
The second menu appears aligned with the parent, because of the condition which matches the code in dropdown.js. This makes for a nice menu that appears outside of the "toolbar" area (the yellow hover).
The third menu does not appear nicely, because it is missing the "dropup" class which is needed to have popper affix to the parent according to the code in dropdown.js.
Given that in some cases, affixing to dropdown-toggle is desired, and in other cases, the parent of dropdown-toggle, I think this should just merely be a config option. Then it can be affixed to either, instead of the above custom code.
Then the above code could just be changed to
if (this._config.affix === 'parent') {
element = parent;
}
This also has other benefits of having the dropdown menu easily affix to other elements regardless of the .dropdown-toggle's shape or visibility. (it can even be hidden and programatically shown and still work). Another use case would be to position the menu aligned with the whole button for a split button dropdown:
https://getbootstrap.com/docs/4.0/components/dropdowns/#split-button-dropdowns
instead of aligned with the split button.
What do you think?
This is concerning the lines in the dropdown.js:
which landed in 70f4a30
I'm not sure why the code is so explicit in declaring the element parent to be used in popper for this exact circumstance. It makes for some frustrating styling.
See example here, which is extremely ugly looking visually but I have provided to make clear the issue:
https://jsfiddle.net/g09bzzzw/18/
You can see that the first dropdown runs as expected, the menu is aligned to the button, everything is great.
The second menu appears aligned with the parent, because of the condition which matches the code in dropdown.js. This makes for a nice menu that appears outside of the "toolbar" area (the yellow hover).
The third menu does not appear nicely, because it is missing the "dropup" class which is needed to have popper affix to the parent according to the code in dropdown.js.
Given that in some cases, affixing to dropdown-toggle is desired, and in other cases, the parent of dropdown-toggle, I think this should just merely be a config option. Then it can be affixed to either, instead of the above custom code.
Then the above code could just be changed to
This also has other benefits of having the dropdown menu easily affix to other elements regardless of the .dropdown-toggle's shape or visibility. (it can even be hidden and programatically shown and still work). Another use case would be to position the menu aligned with the whole button for a split button dropdown:
https://getbootstrap.com/docs/4.0/components/dropdowns/#split-button-dropdowns
instead of aligned with the split button.
What do you think?