How to show more than 7 elements in a menu?

[thealberto]

Hi all, first of all thanks for sharing this project! I'm trying to create a menu with about 20 sub-elements but I can only see 7 of them. Is it because there is not a scroll so I cannot see the other elements of because there is a limitation?

Thanks

[codex-corp]

@abarbaro show us your code so we can help faster.

[thealberto]

Hi, I have amended the page pages-menu adding the following items to the already present NbMenuItem array. I have added the following elements:

{ title: 'Sections', icon: 'nb-keypad', children: [ { title: 'Section1', link: '/pages/section1', }, { title: 'Section2', link: '/pages/section2'', }, { title: 'Section3', link: '/pages/section3', }, ... }

Am i missing something? I can see only 7 elements...

Thanks a lot

[nicolasdms]

I have exactly the same problem. If you have a solution I want it 👍

[ghost]

This is due to a max-height of 300px being enforced on the menu group, I do believe. I posted about the issue here, too, but have had no response:

https://github.com/akveo/ngx-admin/issues/1377

I also attempted to reach out to one of the authors about the bug.

[codex-corp]

@nicolasdms @abarbaro I have a long list of items on the menu and it's showing fine, please share the full code of your page.

[ghost]

@codex-corp Have you attempted to make your pages-menu.ts have a long list of children. Here's a sample. Attempt to open multiple "Main Item" menu item nodes.

--

import { RouterLinkActive } from '@angular/router'; import { NbMenuItem } from '@nebular/theme';

export const MENU_ITEMS: NbMenuItem[] = [ { title: 'Home', icon: 'nb-home', link: '/pages/home', }, { title: 'Root Item', children: [ { title: 'Main Item', children: [{ title: 'Sub Item', }, { title: 'Sub Item', }, { title: 'Sub Item', }, { title: 'Sub Item', }] }, { title: 'Main Item', children: [{ title: 'Sub Item', }, { title: 'Sub Item', }, { title: 'Sub Item', }, { title: 'Sub Item', }] }, { title: 'Main Item', children: [{ title: 'Sub Item', }, { title: 'Sub Item', }, { title: 'Sub Item', }, { title: 'Sub Item', }] }, { title: 'Main Item', children: [{ title: 'Sub Item', }, { title: 'Sub Item', }, { title: 'Sub Item', }, { title: 'Sub Item', }] },
], },
{ title: 'Item', icon: 'nb-title', children: [ { title: 'Item', }, { title: 'Item', }, { title: 'Item', }, { title: 'Item', }, { title: 'Item', }, { title: 'Item', }, ], }, { title: 'Support', children: [ { title: 'Item', }, { title: 'Item', }, { title: 'Item', }, ], }, { title: 'Logout', }
];

[codex-corp]

@AlexJH4U

Are you trying to create 3 level menu? I think the max is 2 level.

[ghost]

@codex-corp - Yes, a 3 level menu... What makes you think that is intentionally not supported....? As you can see, it's been specifically designed/styled for formatting of the three level menu? The max height is set to 300 and overflow is hidden, by my estimation.

In an admin template, supporting only two levels.... would make this a quite horrible menu component, lol.

[ghost]

@codex-corp - even with 2 levels, if you add more than 300px with of items, it doesn't fit. So, it's definitely not an intentional compatibility issue.

[thealberto]

@codex-corp , I have been using the following code in pages-menu.ts:

import { NbMenuItem } from '@nebular/theme';

export const MENU_ITEMS: NbMenuItem[] = [
  {
    title: 'Dashboard',
    icon: 'nb-home',
    link: '/pages/dashboard',
    home: true,
  },
  {
    title: 'FEATURES',
    group: true,
  },
  {
    title: 'Sections',
    icon: 'nb-keypad',
    children: [
      {
      title: 'Section1',
      link: '/pages/s1',
      },
      {
      title: 'Section2',
      link: '/pages/s2',
      },
      {
      title: 'Section3',
      link: '/pages/s3',
      },
      {
      title: 'Section4',
      link: '/pages/s4',
      },
      {
      title: 'Section5',
      link: '/pages/s5',
      },
      {
      title: 'Section6',
      link: '/pages/s6',
      },
      {
      title: 'Section7',
      link: '/pages/s7',
      },
      {
      title: 'Section8',
      link: '/pages/s8',
      },
      {
      title: 'Section9',
      link: '/pages/s9',
      },
      {
      title: 'Section10',
      link: '/pages/s10',
      },
      {
        title: 'Section11',
        link: '/pages/s11',
      },
      {
        title: 'Section12',
        link: '/pages/s12',
      }
    ],
  },
  {
    title: 'Forms',
    icon: 'nb-compose',
    children: [
      {
        title: 'Form Inputs',
        link: '/pages/forms/inputs',
      },
      {
        title: 'Form Layouts',
        link: '/pages/forms/layouts',
      },
    ],
  },
  {
    title: 'Components',
    icon: 'nb-gear',
    children: [
      {
        title: 'Tree',
        link: '/pages/components/tree',
      }, {
        title: 'Notifications',
        link: '/pages/components/notifications',
      },
    ],
  },
  {
    title: 'Maps',
    icon: 'nb-location',
    children: [
      {
        title: 'Google Maps',
        link: '/pages/maps/gmaps',
      },
      {
        title: 'Leaflet Maps',
        link: '/pages/maps/leaflet',
      },
      {
        title: 'Bubble Maps',
        link: '/pages/maps/bubble',
      },
    ],
  },
  {
    title: 'Charts',
    icon: 'nb-bar-chart',
    children: [
      {
        title: 'Echarts',
        link: '/pages/charts/echarts',
      },
      {
        title: 'Charts.js',
        link: '/pages/charts/chartjs',
      },
      {
        title: 'D3',
        link: '/pages/charts/d3',
      },
    ],
  },
  {
    title: 'Editors',
    icon: 'nb-title',
    children: [
      {
        title: 'TinyMCE',
        link: '/pages/editors/tinymce',
      },
      {
        title: 'CKEditor',
        link: '/pages/editors/ckeditor',
      },
    ],
  },
  {
    title: 'Tables',
    icon: 'nb-tables',
    children: [
      {
        title: 'Smart Table',
        link: '/pages/tables/smart-table',
      },
    ],
  },
  {
    title: 'Auth',
    icon: 'nb-locked',
    children: [
      {
        title: 'Login',
        link: '/auth/login',
      },
      {
        title: 'Register',
        link: '/auth/register',
      },
      {
        title: 'Request Password',
        link: '/auth/request-password',
      },
      {
        title: 'Reset Password',
        link: '/auth/reset-password',
      },
    ],
  },
];

I have attached a screenshot for clarifying what I can see.

Thanks

[ghost]

Here's a temporary fix while the team hopefully prepares a fix.

In the /node_modules/@ nebular /theme/components/menu/menu.component.js file

go to like 267 and look for:

    styles: [":host /deep/ {display:block}:host /deep/ .menu-items,:host /deep/ .menu-item>.menu-items{list-style-type:none;overflow:hidden}:host /deep/ .menu-items.collapsed,:host /deep/ .menu-item>.menu-items.collapsed{max-height:0;transition:max-height 0.15s ease-out}:host /deep/ .menu-items.expanded,:host /deep/ .menu-item>.menu-items.expanded{max-height:300px;transition:max-height 0.3s ease-in}:host /deep/ .menu-item a{display:flex;color:inherit;text-decoration:none;align-items:center}:host /deep/ .menu-item a .menu-title{flex:1} "],

replace: .menu-items.expanded{max-height:300px; with a larger value like 900px, so it would be something like:

    styles: [":host /deep/ {display:block}:host /deep/ .menu-items,:host /deep/ .menu-item>.menu-items{list-style-type:none;overflow:hidden}:host /deep/ .menu-items.collapsed,:host /deep/ .menu-item>.menu-items.collapsed{max-height:0;transition:max-height 0.15s ease-out}:host /deep/ .menu-items.expanded,:host /deep/ .menu-item>.menu-items.expanded{max-height:900px;transition:max-height 0.3s ease-in}:host /deep/ .menu-item a{display:flex;color:inherit;text-decoration:none;align-items:center}:host /deep/ .menu-item a .menu-title{flex:1} "],

Question for the Akveo, who owns and maintains this package:

• why are you using an inline template and not the menu-item.component.html templateUrl so we can easily make tweaks?
• why inline styles, when you have a menu-component.scss that is being ignored?

Is this just the way the .js file was compiled? Is there a way to recompile it after making those changes to the respective individual files?

[thealberto]

Thanks for the support! I'll use you suggestion in the meantime they fix the issue.

Thanks

[Odlir]

Hi, I'm sorry for posting here I'm learning angular and trying to use ngx-admin theme, however, I don't quite understand how it works after I read the documentation. id like to know where did you guys found out how to change sidenav titles. searching for issues I found out you use export const MENU_ITEMS: NbMenuItem[] = {...}; but id like to change other components, thanks.

[ghost]

Hello -

You’ll have to be more specific, and should create a NEW issue for this question. In your new issue, include a screenshot of the menu and annotate the image with the changes you are trying to make, as it’s not clear from your description.

[thealberto]

@AlexJH4U Thanks for your fix, in dev mode it works but once i run npm run build:prod the menu goes back to the 300px. Do you have an idea on how to fix it please?

Thanks

[ghost]

HI @abarbaro - that's odd, as I haven't run into that. Are you sure you're making the changes in the right spot of the node_modules folder and that your changes aren't being overwritten with a command-line reinstall of the issue.

@nnixaa - you mentioned this was to be fixed on the next release in December 2017. Did this fix make it in? It's pretty debilitating!

Best, Alex

[nnixaa]

Hey Guys, this's been fixed in RC.5 (https://github.com/akveo/nebular/blob/master/CHANGELOG.md#200-rc5-2018-01-31), so after updating Nebular the issue should be resolved.

[thealberto]

Thanks, I'm happy to verify this for you. How should I update making sure I don't lose the rest of the site?