Remove scrollbar inside angular components

Question

I should remove these two scrollbars but I'm not succeeding.I tried using overflow:hidden but failed

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;
    
  }

I expect these two scrollbars to take off. I know I should use CSS but sadly nothing happens .Maybe I should override the angular material component?

Bmc9926 · Accepted Answer · 2022-11-25 17:35:34Z

2

This worked for me. Inside your styles.css file place the following code:

.mat-drawer-inner-container::-webkit-scrollbar {
  display: none ;
}

    .mat-drawer-content::-webkit-scrollbar{
  display: none ;
}

First one will hide the smaller scrollbar, second one will hide the bigger scrollbar.

answered Nov 25, 2022 at 17:35

Bmc9926

212 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove scrollbar inside angular components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related