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.
If I can make the scroll bar always visible, the problem is solved.
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