fix(container): Add max height and overflow behavior to menu component (

#26442)
dotCMS · Oct 13, 2023 · 70473d7 · 70473d7
1 parent 534774e
commit 70473d7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/.../dot-containers/dot-container-create/dot-container-code/dot-container-code.component.html b/.../dot-containers/dot-container-create/dot-container-code/dot-container-code.component.html
@@ -20,7 +20,15 @@
                 <ng-template #contentTypesLoader>
                     <p-skeleton borderRadius="0px" width="4rem" height="3.9rem"></p-skeleton>
                 </ng-template>
-                <p-menu #actionsMenu [popup]="true" [model]="menuItems" appendTo="body"></p-menu>
+                <p-menu
+                    #actionsMenu
+                    [popup]="true"
+                    [model]="menuItems"
+                    [style]="{
+                        'max-height': '300px',
+                        overflow: 'auto'
+                    }"
+                    appendTo="body"></p-menu>
             </ng-template>
             <ng-template pTemplate="content">
                 <div

diff --git a/...t-containers/dot-container-create/dot-container-code/dot-container-code.component.spec.ts b/...t-containers/dot-container-create/dot-container-code/dot-container-code.component.spec.ts
@@ -364,5 +364,10 @@ describe('DotContentEditorComponent', () => {
             const loader = de.query(By.css('p-skeleton'));
             expect(loader).toBeDefined();
         });
+
+        it('should have a menu with max height in 300px and overflow auto', () => {
+            expect(menu.style['max-height']).toBe('300px');
+            expect(menu.style.overflow).toBe('auto');
+        });
     });
 });