Background Story: Working on designing a screen layout that includes the use of a mat-drawer to display a custom component. The challenge arises when the custom component gets nested inside a div (with class="mat-drawer-inner-container") automatically added by the mat-drawer component itself. Here's how the HTML structure looks like initially:
<mat-drawer>
<custom-component-directive></custom-component-directive>
</mat-drawer>
After inspecting in Chrome dev tools, here's how it looks with the additional div:
<mat-drawer>
<div class="mat-drawer-inner-container">
<custom-component-directive></custom-component-directive>
</div>
</mat-drawer>
The issue at hand is that this extra div introduces an unwanted scrollbar to the entire component, leading to dual scrollbars as I already have a virtual-scrollbar implemented within the custom component for the table. Visually, it ends up looking cluttered and not user-friendly.
Through experimentation in Chrome dev tools, discovered that applying the style overflow-y: hidden to the auto-generated .mat-drawer-inner-container div effectively hides the redundant scrollbar.
However, struggling to implement this fix in actual code scenarios despite trying various approaches:
- Attempted targeting the
mat-drawer-inner-containerusing CSS linked to the parent component, but no luck.
.mat-drawer .mat-drawer-inner-container {
overflow-y: hidden;
}
- Tried accessing the parent element of the custom component directive by employing the
:hostpseudo-selector within the custom component's CSS, still unsuccessful.
:host .mat-drawer-inner-container {
overflow-y: hidden;
}
- Experimented with using
!importantto emphasize the styles' precedence in both cases mentioned above. - Even resorted to applying inline styles in desperation.
Admittedly lacking expertise in CSS and styling nuances, seeking any guidance or suggestions to resolve this dilemma.