Full support for Dropdown alignment options #26938
Conversation
|
It seems very nice, can you provide a CodePen to show us what you did ? |
|
Thx for the review! Here you can see an example https://r4j6xr2x0m.codesandbox.io/, the source code is here https://codesandbox.io/s/r4j6xr2x0m. And of course I'll add unit tests, I just need some time. |
|
@Johann-S, done! |
There was a problem hiding this comment.
LGTM ! Thanks @vepanimas !
Before merging that I need a review from @andresgalante or @mdo about your SCSS code 👍
And if it's fine I think we'll merge that in our next major release (4.2)
BTW it'll partially fixed #22962
There was a problem hiding this comment.
@vepanimas thanks a lot for you contribution! 👍The code is sound
@Johann-S the position of the menu gets overwritten by popper, the transforms and positions we have in our code base are a nice fallback in case the UI is loaded without JS or popper is not present.
| @@ -595,7 +595,9 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. | |||
|
|
|||
| ## Menu alignment | |||
|
|
|||
| By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. | |||
| By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. | |||
| When positioned horizontally add `.dropdown-menu-right` to a `.dropdown-menu` to right align the menu or `.dropdown-menu-center` to center. | |||
There was a problem hiding this comment.
@mdo This is a bit hard to understand, I'd rewrite it as:
Apply
.dropdown-menu-rightor.dropdown-menu-centeras a modifier to.dropdown-menuto right or center align the menu on a dropdown or dropup. And apply.dropdown-menu-bottomor.dropdown-menu-centeras a modifier to.dropdown-menuto bottom or center align the menu on a dropright or dropleft.
What do you think?
There was a problem hiding this comment.
I tried as hard as I could, but I'm not a native speaker =)
There was a problem hiding this comment.
@vepanimas don't worry, me neither, that's why I am asking @mdo 😝
There was a problem hiding this comment.
Maybe @XhmikosR can help us too 😄 or @patrickhlauke
There was a problem hiding this comment.
@mdo: can you chime in here? Otherwise this can be merged AFAIK.
|
Actually unit tests fail here. |
|
Might be something with the conflicts, @Johann-S have a look when you can :) |
|
Maybe @vepanimas can fix the conflict ? |
|
@Johann-S , I'll look into it tomorrow. |
|
Ping @vepanimas |
|
Closing due to lack of response. You can comment here and we can re-open it if you decide to resume working on the requested changes. |
|
I too, would like to see this feature. |
|
Not sure this PR can be merged so @k-func you're welcome to submit a new proper PR with unit tests. |
There are a lot of issues related to incomplete dropdown alignment support. In this PR I added support for all PopperJS placement options.
Two new classes were introduced:
.dropdown-menu-center(for all directions) and.dropdown-menu-bottom(only fordropleftanddropright).I am open to discussion, feel free to comment.