refactor: corrected xblock dropdown menu

openedx · Nov 15, 2024 · 6b6fb77 · 6b6fb77
1 parent 29add8c
commit 6b6fb77
Showing 1 changed file with 11 additions and 14 deletions.
diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js
@@ -483,21 +483,18 @@ function($, _, Backbone, gettext, BasePage,
             // not present yet during the domReady event, we have to handle displaying it ourselves.
             subMenu.classList.toggle('is-shown');
 
-            try {
-                if (this.options.isIframeEmbed) {
-                    window.parent.postMessage(
-                        {
-                            type: 'toggleDropdownMenu',
-                            message: 'Sends a message when the dropdown menu is toggled',
-                            payload: {
-                                subMenuHeight: subMenu.offsetHeight,
-                            }
-                        }, document.referrer
-                    );
-                }
-            } catch (e) {
-                console.error(e);
+            // Calculate the viewport height and the dropdown menu height.
+            // Check if the dropdown would overflow beyond the iframe height based on the user's click position.
+            // If the dropdown overflows, adjust its position to display above the click point.
+            const courseUnitXBlockIframeHeight = window.innerHeight;
+            const courseXBlockDropdownHeight = subMenu.offsetHeight;
+            const clickYPosition = event.clientY;
+
+            if ((courseXBlockDropdownHeight + clickYPosition) > courseUnitXBlockIframeHeight) {
+                // Move the dropdown menu upward to prevent it from overflowing out of the viewport.
+                subMenu.style.top =  `-${courseXBlockDropdownHeight}px`;
             }
+
             // if propagation is not stopped, the event will bubble up to the
             // body element, which will close the dropdown.
             event.stopPropagation();