- Issue created by @ady1503
- ๐ต๐นPortugal jmauricio
Please meake sure you are using the latest versions of gin and gin_toolbar.
Just tested it and works fine. - ๐ช๐ธSpain ady1503
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.
----
Thank you.
- ๐ต๐นPortugal jmauricio
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:
I donยดt know it this is an option for you, but the "Sidebar, Vertical Toolbar" from Gin settings should solve the issue.
- ๐ช๐ธSpain ady1503
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.
- ๐ต๐นPortugal jmauricio
Your css will affect the toolbar even when gin is using vertical toolbar.
I'll a 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-x: auto" automatically forces the "overflow-y: 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; }
- ๐ช๐ธSpain ady1503
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.