Fixed smart menu cut-off issue on mobile views.

- Fix #356 (UN-236)
moodle-an-hochschulen · Sep 22, 2023 · 5fd27ad · 5fd27ad
1 parent d24bcc5
commit 5fd27ad
Showing 1 changed file with 11 additions and 15 deletions.
diff --git a/scss/boost_union/post.scss b/scss/boost_union/post.scss
@@ -995,12 +995,6 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote {
                                     padding: 0;
                                 }
                             }
-                            /* Added max-height and overflow auto for scollbar when the card item reach the dropdown
-                               height */
-                            &.dropdownmoremenu .dropdown-menu .dropdown-menu {
-                                max-height: 300px;
-                                overflow-y: auto;
-                            }
                         }
                     }
                 }
@@ -1278,10 +1272,11 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote {
                         &.show {
                             position: relative;
                             /* The dropdown submenu style is added for the header menu */
-                            /* Height added to control the menu with scrollbard, border, border radius, background
-                               color, padding and its position styles are added and display block is added to show the
-                               submenu when the dropdown menu is clicked */
+                            /* Max width and height added to control the menu with scrollbar, border, border radius,
+                               background color, padding and its position styles are added and display block is added
+                               to show the submenu when the dropdown menu is clicked */
                             ul {
+                                max-width: 350px;
                                 max-height: 250px;
                                 list-style: none;
                                 border: 1px solid $border-color;
@@ -1584,12 +1579,6 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote {
                 }
             }
         }
-        /* Smart header menu listing dropdown submenu position on right when the menu is not in the More dropdown menu */
-        &:not(.menubar) .moremenu .more-nav li.nav-item.dropdown:not(.dropdownmoremenu)
-        .dropdown-menu .dropdown-submenu.show ul {
-            left: auto;
-            right: 100%;
-        }
     }
     .drawer-primary .drawercontent .list-group .list-group-item {
         align-items: center;
@@ -1622,6 +1611,7 @@ so the dropdown menu won't hide behind the screen on responsive */
     .dropdown-menu li.nav-item.dropdown.card-dropdown .dropdown-menu {
         min-width: 260px;
         max-width: 260px;
+        overflow-y: auto;
     }
 }
 
@@ -1645,6 +1635,12 @@ so the dropdown menu won't hide behind the screen on responsive */
             ~ .drawer-bottom.drawer {
                 top: 101px;
             }
+            /* Dropdown sub menu items position on the More menu */
+            .moremenu .more-nav li.nav-item.dropdownmoremenu .dropdown-menu li.nav-item.dropdown .dropdown-menu .dropdown-submenu ul {
+                top: 100%;
+                left: auto;
+                z-index: 1;
+            }
         }
         /* When the menu in the footer bottom is clicked, its navigation drawer
             position appears below the header when the header menubar is disabled. */