Scroll bar not show

Created on 15 May 2025, 5 months ago

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

๐Ÿ› Bug report
Status

Active

Version

1.0

Component

Code

Created by

๐Ÿ‡ช๐Ÿ‡ธSpain ady1503

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ady1503
  • ๐Ÿ‡ต๐Ÿ‡นPortugal jmauricio
  • ๐Ÿ‡ต๐Ÿ‡น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.

  • ๐Ÿ‡ช๐Ÿ‡ธSpain ady1503
  • ๐Ÿ‡ต๐Ÿ‡น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.

  • ๐Ÿ‡ต๐Ÿ‡นPortugal jmauricio
  • ๐Ÿ‡ช๐Ÿ‡ธ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.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Kanchan Bhogade

    Hi, is there patch ready for testing?

  • ๐Ÿ‡ต๐Ÿ‡นPortugal jmauricio
Production build 0.71.5 2024