angularangular-materialsidenav

Material sidenav with scrolling always visible


In the default behavior, the sidenav scroll bar is only displayed if the content exceeds the limits of the Y axis. Is it possible to make the scroll bar always visible, regardless of whether the content falls within the limits?

I want this because the effect of appearing and disappearing from the scroll bar, triggers responsiveness and moves the central content. So, every time I open or close one of the mat-menu-items that are accordions, the scroll bar fades and appears, triggering responsiveness.

<mat-drawer-container class="sidemenu-container" autosize>
  <mat-drawer #drawer class="sidemenu-drawer" mode="side" [class.mat-elevation-z8]=true>

    <mat-nav-list>

      <mat-list-item>
         <a href="#" class="sidemenu-items-link">
           <mat-icon>widgets</mat-icon>
           Dashboard
          </a>
      </mat-list-item>

      <mat-list-item>
        <a href="#" class="sidemenu-items-link">
          <mat-icon>face</mat-icon>
          Clientes
         </a>
      </mat-list-item>

      <mat-accordion>
        <mat-expansion-panel [class.mat-elevation-z0]=true>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>assignment_ind</mat-icon>
              Colaboradores
            </mat-panel-title>
          </mat-expansion-panel-header>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>people_outline</mat-icon>
              Funcionários/Grupos
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>card_membership</mat-icon>
              Perfis
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>date_range</mat-icon>
              Escalas
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>access_time</mat-icon>
              Ponto
            </a>
          </mat-list-item>

        </mat-expansion-panel>
      </mat-accordion>

      <mat-accordion>
        <mat-expansion-panel [class.mat-elevation-z0]=true>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>domain</mat-icon>
              Ativos
            </mat-panel-title>
          </mat-expansion-panel-header>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>drive_eta</mat-icon>
              Frota
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>devices_other</mat-icon>
              Almoxarifado
            </a>
          </mat-list-item>
        </mat-expansion-panel>
      </mat-accordion>

      <mat-accordion>
        <mat-expansion-panel [class.mat-elevation-z0]=true>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>business_center</mat-icon>
              Administrar
            </mat-panel-title>
          </mat-expansion-panel-header>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>attach_money</mat-icon>
              Despesas
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>account_balance_wallet</mat-icon>
              Adiantamentos
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>ev_station</mat-icon>
              Abastecimentos
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>tune</mat-icon>
              Ajustes
            </a>
          </mat-list-item>

        </mat-expansion-panel>
      </mat-accordion>

      <mat-accordion>
        <mat-expansion-panel [class.mat-elevation-z0]=true>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon>local_shipping</mat-icon>
              Visitas
            </mat-panel-title>
          </mat-expansion-panel-header>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>list</mat-icon>
              Chamados/Tarefas
            </a>
          </mat-list-item>

          <mat-list-item>
            <a href="#" class="sidemenu-items-link">
              <mat-icon>assignment</mat-icon>
              Ordens de Serviço
            </a>
          </mat-list-item>

        </mat-expansion-panel>
      </mat-accordion>

    </mat-nav-list>

  </mat-drawer>

  <div class="sidemenu-content">
    <p>É um facto estabelecido de que um leitor é distraído pelo conteúdo legível de uma página quando analisa a sua
      mancha gráfica. Logo, o uso de Lorem Ipsum leva a uma distribuição mais ou menos normal de letras, ao contrário do
      uso de "Conteúdo aqui, conteúdo aqui", tornando-o texto legível. Muitas ferramentas de publicação electrónica e
      editores de páginas web usam actualmente o Lorem Ipsum como o modelo de texto usado por omissão, e uma pesquisa
      por "lorem ipsum" irá encontrar muitos websites ainda na sua infância. Várias versões têm evoluído ao longo dos
      anos, por vezes por acidente, por vezes propositadamente (como no caso do humor).</p>
  </div>
</mat-drawer-container>

As you can see in the sidenav code, some mat-list-items are accordions. If I open more than one accordion, the scroll bar appears, if I close it, it disappears. This generates constant movements in the central content due to responsiveness.

enter image description here enter image description here

If I can make the scroll bar always visible, the problem is solved.


Solution

  • The component responsible for sidenav's scroll bar is a runtime created div that has the class mat-drawer-inner-container. To make the scroll bar always visible, just define overflow-y: scroll! Important; for that element. !important is not very well seen in the angular, but it was the only way I got it. In my case:

    mat-drawer {
        .mat-drawer-inner-container {
            overflow-y: scroll !important;
        }
    }
    

    in styles.scss