Skip to content

Commit

Permalink
fix(dropdown): left and right menu positioning regression
Browse files Browse the repository at this point in the history
This PR fixes the first level of simple dropdown inside the right menu
was cropped and out of the screen when the parent menu item has short
text, and the dropdown doesn't specify the class name `left`.

To avoid this, all dropdown inside the right menu will be forced to
appear leftward by default. The dropdown can also appear leftward or
rightward by having `left` or `right` class name.

This PR also fix the dropdown inside the buttons which are positioned
incorrectly.
  • Loading branch information
ko2in authored Jun 12, 2020
1 parent 4187f1f commit 2cd5e9c
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 5 deletions.
16 changes: 12 additions & 4 deletions src/definitions/modules/dropdown.less
Original file line number Diff line number Diff line change
Expand Up @@ -318,9 +318,10 @@
}

/* Automatically float dropdown menu right on last menu item */
.ui.menu .right.menu .dropdown:last-child .menu:not(.left),
.ui.menu .right.dropdown.item .menu:not(.left),
.ui.buttons > .ui.dropdown:last-child .menu:not(.left) {
.ui.menu .right.menu .dropdown:last-child > .menu:not(.left),
.ui.menu .right.dropdown.item > .menu:not(.left),
.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) {
left: auto;
right: 0;
}

Expand Down Expand Up @@ -1096,7 +1097,7 @@ select.ui.dropdown {

.ui.dropdown > .left.menu .menu,
.ui.dropdown .menu .left.menu {
left: auto !important;
left: auto;
right: 100%;
margin: @leftSubMenuMargin !important;
border-radius: @leftSubMenuBorderRadius !important;
Expand Down Expand Up @@ -1325,6 +1326,13 @@ select.ui.dropdown {
left: 100%;
opacity: 1;
}
.ui.simple.dropdown > .menu > .item:active > .left.menu,
.ui.simple.dropdown .menu .item:hover > .left.menu,
.right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right),
.right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) {
left: auto;
right: 100%;
}
& when (@variationDropdownDisabled) {
.ui.simple.disabled.dropdown:hover .menu {
display: none;
Expand Down
2 changes: 1 addition & 1 deletion src/themes/default/modules/dropdown.variables
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
@subMenuLeft: 100%;
@subMenuRight: auto;
@subMenuDistanceAway: -0.5em;
@subMenuMargin: 0 0 0 @subMenuDistanceAway;
@subMenuMargin: 0 @subMenuDistanceAway;
@subMenuBorderRadius: @borderRadius;
@subMenuZIndex: 21;

Expand Down

0 comments on commit 2cd5e9c

Please sign in to comment.