@syncfusion/ej2-ribbon 33.2.3 → 33.2.4

package/dist/es6/ej2-ribbon.es2015.js

@@ -3902,7 +3902,7 @@ class RibbonGallery {
     setWrapperStyle(popup, popupContainerItems) {
         if (popup.width !== 'auto') {
             popupContainerItems.forEach((ele) => {
-                ele.style.flexFlow = 'wrap';
+                ele.style.flexFlow = 'column wrap';
             });
         }
     }
@@ -4175,6 +4175,9 @@ class RibbonGallery {
                     const popupContainerItems = popupContainerEle.querySelectorAll('.e-ribbon-gallery-container');
                     this.setWrapperStyle(popup, popupContainerItems);
                     this.setFoucsToFirstItem(popupContainerEle, true, item.id);
+                    if (popup.width !== 'auto') {
+                        this.alignGalleryPopupLeft(popupContainerEle, buttonEle);
+                    }
                 },
                 beforeClose: (args) => {
                     const isCancelled = this.popupEvents(args.event, item.gallerySettings, 'popupClose', false);
@@ -4345,6 +4348,22 @@ class RibbonGallery {
             this.handleGalleryPopupNavigation(e, popupEle, isDropdown, itemID, popup, gallerySettings);
         };
     }
+    alignGalleryPopupLeft(popup, buttonEle) {
+        const popupEl = popup.parentElement;
+        if (!popupEl) {
+            return;
+        }
+        const currentLeft = parseFloat(popupEl.style.left);
+        const buttonRect = buttonEle.getBoundingClientRect();
+        const popupWidth = popupEl.offsetWidth;
+        let targetLeft = buttonRect.left - popupWidth - 1;
+        if (targetLeft < 0) {
+            targetLeft = 1;
+        }
+        if (Math.abs(currentLeft - targetLeft) > 1) {
+            popupEl.style.left = `${targetLeft}px`;
+        }
+    }
     handleGalleryPopupNavigation(e, popupEle, isDropdown, itemID, popup, gallerySettings) {
         const galleryPopupEle = popupEle.querySelectorAll('.e-ribbon-gallery-item');
         if (galleryPopupEle) {