Fixed #11276 - TieredMenu | responsive is not correct

primefaces · Mar 16, 2022 · 9a96d87 · 9a96d87
1 parent b134840
commit 9a96d87
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/app/components/tieredmenu/tieredmenu.css b/src/app/components/tieredmenu/tieredmenu.css
@@ -43,3 +43,7 @@
     left: 100%;
     top: 0;
 }
+
+.p-tieredmenu .p-menuitem-active > p-tieredmenusub > .p-submenu-list.p-submenu-list-flipped {
+    left: -100%;
+}
diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts
@@ -1,4 +1,4 @@
-import { NgModule, Component, ElementRef, Input, Renderer2, OnDestroy,ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, Output, EventEmitter, ViewRef } from '@angular/core';
+import { NgModule, Component, ElementRef, Input, Renderer2, OnDestroy,ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, Output, EventEmitter, ViewRef, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';
 import { MenuItem, OverlayService, PrimeNGConfig } from 'primeng/api';
@@ -11,7 +11,7 @@ import { TooltipModule } from 'primeng/tooltip';
 @Component({
     selector: 'p-tieredMenuSub',
     template: `
-        <ul [ngClass]="{'p-submenu-list': !root}">
+        <ul #sublist [ngClass]="{'p-submenu-list': !root}">
             <ng-template ngFor let-child [ngForOf]="(root ? item : item.items)">
                 <li *ngIf="child.separator" class="p-menu-separator" [ngClass]="{'p-hidden': child.visible === false}">
                 <li *ngIf="!child.separator" #listItem [ngClass]="{'p-menuitem':true, 'p-menuitem-active': child === activeItem, 'p-hidden': child.visible === false}" [ngStyle]="child.style" [class]="child.styleClass" pTooltip [tooltipOptions]="child.tooltipOptions">
@@ -69,9 +69,13 @@ export class TieredMenuSub implements OnDestroy {
 
             if (!value)
                 this.activeItem = null;
+            else
+                this.positionSubmenu()
         }
     }
 
+    @ViewChild('sublist') sublistViewChild: ElementRef;
+
     @Output() leafClick: EventEmitter<any> = new EventEmitter();
 
     @Output() keydownItem: EventEmitter<any> = new EventEmitter();
@@ -196,6 +200,23 @@ export class TieredMenuSub implements OnDestroy {
         });
     }
 
+    positionSubmenu() {
+        let sublist = this.sublistViewChild && this.sublistViewChild.nativeElement;
+        console.log(sublist)
+
+        if (sublist) {
+            const parentItem = sublist.parentElement.parentElement;
+            const containerOffset = DomHandler.getOffset(parentItem);
+            const viewport = DomHandler.getViewport();
+            const sublistWidth = sublist.offsetParent ? sublist.offsetWidth : DomHandler.getHiddenElementOuterWidth(sublist);
+            const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
+
+            if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) {
+                DomHandler.addClass(sublist, 'p-submenu-list-flipped');
+            }
+        }
+    }
+
     findNextItem(item) {
         let nextItem = item.nextElementSibling;