Problem/Motivation

When has many menu items the menu show only menu with page height size, the next items is not showing.

Steps to reproduce

Proposed resolution

Add scrol bar to menu.

Remaining tasks

Thanks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#6 Screenshot from 2025-06-03 23-10-46.png24.02 KBjmauricio
#4 not see an bar Screenshot 2025-06-03 192510.jpg78.04 KBady1503
#4 drupal menu see an scrolbar 2025-06-03 192601.jpg46.89 KBady1503

Comments

ady1503 created an issue. See original summary.

jmauricio’s picture

jmauricio commented
Assigned: Unassigned » jmauricio
Status: Active » Needs work
jmauricio’s picture

jmauricio commented
Assigned: jmauricio » Unassigned
Status: Needs work » Closed (cannot reproduce)

Please meake sure you are using the latest versions of gin and gin_toolbar.
Just tested it and works fine.

ady1503’s picture

ady1503 commented
StatusFileSize
new drupal menu see an scrolbar 2025-06-03 192601.jpg46.89 KB
new not see an bar Screenshot 2025-06-03 192510.jpg78.04 KB

Hello.

In the photos, you can see the same menu, with the same lines. The Drupal menu has the scroll bar. It doesn't appear in your module, and I can't scroll down to select the desired menu line. Everything is up to date.

alt

----

alt

Thank you.

ady1503’s picture

ady1503 commented
Status: Closed (cannot reproduce) » Active
jmauricio’s picture

jmauricio commented
StatusFileSize
new Screenshot from 2025-06-03 23-10-46.png24.02 KB

Ok, i see, but this is an Gin or Gin Toolbar issue, i do not add any CSS to the toolbar except to add the icons.

Here is a screenshot of the default admin toolbar not using this module with a reduced height window:
screenshot

I don´t know it this is an option for you, but the "Sidebar, Vertical Toolbar" from Gin settings should solve the issue.

jmauricio’s picture

jmauricio commented
Status: Active » Needs review
ady1503’s picture

ady1503 commented

I've added this CSS to the beginning of the module's CSS file, and it works fine.

If you want to add it to the module, that's your decision.

Here's the code in case anyone else has the same problem and wants a solution.

The code:

/* Versión mejorada - Scrollbar solo visible cuando es necesario y durante hover */
.toolbar .toolbar-menu ul {
    max-height: calc(100vh - 176px);
    overflow-y: auto !important;
    scrollbar-width: none; /* Oculta scrollbar en Firefox por defecto */
    -ms-overflow-style: none; /* Oculta scrollbar en IE/Edge */
}

/* Oculta scrollbar en WebKit por defecto */
.toolbar .toolbar-menu ul::-webkit-scrollbar {
    display: none;
    width: 8px;
}

/* Muestra scrollbar al hacer hover */
.toolbar .toolbar-menu ul:hover {
    scrollbar-width: thin; /* Muestra en Firefox al hover */
}

.toolbar .toolbar-menu ul:hover::-webkit-scrollbar {
    display: block; /* Muestra en WebKit al hover */
}

/* Estilo del thumb (barra deslizadora) */
.toolbar .toolbar-menu ul::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Estilo del track (fondo de la barra) */
.toolbar .toolbar-menu ul::-webkit-scrollbar-track {
    background: transparent;
}

Gracias por el modulo.

jmauricio’s picture

jmauricio commented

Your css will affect the toolbar even when gin is using vertical toolbar.
I'll attach a improved version of you css, so it doesn´t break the vertical toolbars.

I will not add this to the module as this breaks the menu when there are third level menus, because the "overflow-y: auto" automatically forces the "overflow-x: hidden".
If someone can fix this i will add this to the module.

.toolbar-horizontal .toolbar-menu-administration > ul.toolbar-menu > li.menu-item > ul.toolbar-menu {
  max-height: calc(100vh - var(--gin-toolbar-height));
  overflow-y: auto !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.toolbar-horizontal.gin--classic-toolbar .toolbar-menu-administration > ul.toolbar-menu > li.menu-item > ul.toolbar-menu {
  max-height: calc(100vh - var(--gin-toolbar-y-offset));
}
.toolbar-horizontal .toolbar-menu-administration > ul.toolbar-menu > li.menu-item > ul.toolbar-menu::-webkit-scrollbar {
  display: none;
  width: 8px;
}
.toolbar-horizontal .toolbar-menu-administration > ul.toolbar-menu > li.menu-item > ul.toolbar-menu:hover {
  scrollbar-width: thin;
}
.toolbar-horizontal .toolbar-menu-administration > ul.toolbar-menu > li.menu-item > ul.toolbar-menu:hover::-webkit-scrollbar {
  display: block;
}
.toolbar-horizontal .toolbar-menu-administration > ul.toolbar-menu > li.menu-item > ul.toolbar-menu::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.toolbar-horizontal .toolbar-menu-administration > ul.toolbar-menu > li.menu-item > ul.toolbar-menu::-webkit-scrollbar-track {
  background: transparent;
}
ady1503’s picture

ady1503 commented

I've tried your code and ultimately left your CSS suggestion.

Since I'll never have a three-level menu, it doesn't affect me.

You can close the issue; it works for my desired format.

Thanks.

kanchan bhogade’s picture

kanchan bhogade commented

Hi, is there patch ready for testing?

jmauricio’s picture

jmauricio commented
Status: Needs review » Closed (works as designed)