Trying to remove the two scrollbars from this code, but so far unsuccessful. Attempted using overflow:hidden without success
filet.component.html
<mat-drawer-container class="example-container" autosize>
<button type="button" mat-button (click)="drawer.toggle()">
Filtri
</button>
<mat-drawer #drawer class="example-sidenav" mode="side">
<!-- Sezione taglie -->
<section class="example-section" [formGroup]="toppings">
<h4>Seleziona la tua taglia:</h4>
<p><mat-checkbox formControlName="size_34">34</mat-checkbox></p>
<p><mat-checkbox formControlName="size_36">36</mat-checkbox></p>
<p><mat-checkbox formControlName="size_38">38</mat-checkbox></p>
</section>
<!-- Sezione colori -->
<section class="example-section" [formGroup]="toppings">
<h4>Seleziona il colore:</h4>
<p><mat-checkbox formControlName="nero" id ="nero">Nero</mat-checkbox></p>
<p><mat-checkbox formControlName="bianco" id ="bianco">Bianco</mat-checkbox></p>
</section>
<!-- Sezione Marche -->
<section class="example-section" [formGroup]="toppings">
<h4>Selezione la marca:</h4>
<p><mat-checkbox formControlName="Louis">Louis Vuitton</mat-checkbox></p>
</section>
<!-- Sezione Prezzo -->
<section class="example-section" [formGroup]="toppings">
<h4>Selezione il prezzo:</h4>
<p><mat-checkbox formControlName="price_20">Fino a 20 EUR</mat-checkbox></p>
</section>
</mat-drawer>
<!-- -->
<div class="example-sidenav-content">
</div>
</mat-drawer-container>
filter.component.scss
.example-container {
width: 500px;
height: 300px;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.example-sidenav-content {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.example-sidenav {
padding: 20px;
}
.example-section {
margin: 12px 0;
}
Struggling to remove the two scrollbars. Attempted using CSS with no luck. Perhaps need to override the angular material component? https://i.sstatic.net/Voqul.png