Disabling the scrollbar within angular elements

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?

htmlcssangulartypescriptfrontend

Answer №1

Success! I found a solution that worked for me.

To make the scrollbars disappear in your styles.css file, add the following code:</p>

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

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

The first snippet will hide the smaller scrollbar, while the second one will hide the larger scrollbar.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to close the MatBottomSheet by going back in the browser?

I'm currently utilizing https://material.angular.io/components/bottom-sheet/overview. I've encountered an issue where, when the bottom sheet is open and a user clicks on the back button in their browser, they are redirected away from the page tha ...

angularangular-material

The form within the while loop is only functioning with the initial result

Within a while loop, I have a form that is being processed with ajax. The issue is that it only works on the first form and not on the others. Can someone take a look? <?php while($a = $stmt->fetch()){ ?> <form method="post" action=""> ...

javascriptphpjqueryhtmlajax

Modify the color of the Swing link label for disabled state

I'm currently working with Java Swing linkLabel. I've noticed that when the link is disabled, it appears in gray by default, but I would like it to be black instead. Is there a method available to change the color of a disabled link label? ...

javahtmlswingjlabel

Deactivate an option within an angularjs multi-select menu

Currently, I am utilizing an angularjs multiselect box which is displayed below: https://i.stack.imgur.com/w6ffN.png Here is the html code snippet: <select multiple ng-options="Language.LangID as Language.LangName for Language in AllLanguages " ng-mo ...

htmlangularjsmulti-select

Utilizing AJAX to upload a file and managing it through a Java servlet on the server side

I've been struggling with this particular issue for the past few days and haven't found any helpful resources elsewhere. I'm attempting to upload a file through an HTML form that includes other input fields: var formData = new FormData() ...

htmljqueryajaxfile-uploadform-data

404 error received from Angular 2 API call despite successful testing of service

I've been attempting to make a web service call from my Angular 2 application. private baseUrl: string = 'http://localhost:3000/api'; getPatterns(): Observable<Pattern[]> { const patterns$ = this.http .get(`${this.baseUrl ...

restangularasp.net-web-api

How can I perform email validation using Angular 6?

I am working on an Angular6 form that includes a field for email input. Currently, the email field has proper validation which displays an error message when an invalid email is entered. However, even if the error message is shown, the form is still saved ...

angularemailangular-material

Verifying the functionality of a custom directive in Angular 2 (Ionic 2) through unit

In my ionic application, I developed a custom directive specifically for text masking, aimed at formatting phone numbers within input fields. The core functionality of this directive revolves around utilizing ngControl to facilitate the retrieval and assig ...

javascriptangularunit-testingionic2testbed

When the variable type is an interface, should generics be included in the implementation of the constructor?

Here is a code snippet for you to consider: //LINE 1 private result: Map<EventType<any>, number> = new HashMap<EventType<any>, number>(); //LINE 2 private result: Map<EventType<any>, number> = new HashMap(); When the ...

typescriptgenerics

In Typescript, type errors in Object Spread Syntax are not causing any issues

In the following code snippets, the object spread syntax should generate a typescript error, but surprisingly no errors are being thrown. It's important to note that I intentionally added a typo in the address property for this test. Snippet A.1. - n ...

typescript

TypeScript purity - "The variable exports is not defined"

I encountered an issue with my simple client-server TypeScript application where every import statement in my client.ts file triggers a ReferenceError: exports is not defined error in the browser after loading the HTML. Here is the project structure: root ...

typescript

Angular 2 Directive for Ensuring Required Conditions

Is there a way to make form fields required or not based on the value of other fields? The standard RequiredValidator directive doesn't seem to support this, so I've created my own directive: @Directive({ selector: '[myRequired][ngControl ...

validationtypescriptangularangular2-directives

Dealing with a nested object problem in Angular using TypeScript

I am currently working on an Angular 15 application that is designed to showcase information about different games to users. Within the application, I have a global object structured like this: GAMES_INFO: { skyroads: { name: 'Sky Roads&a ...

angulartypescript

A guide on utilizing buttons within ion list items to execute actions independently for both the button and the list item

Currently, I have a list item with a button that is displayed based on a certain condition. My issue is that when I click the button, a popup should appear, but instead, it also navigates to the next page in the background. Can someone help me figure out h ...

javascripthtmlangularjsionic-framework

Execute TSC on the Hosted Build Agent

Currently, I am diving into TypeScript and have managed to create a basic app that I would like to deploy using VSTS on Azure App Service. My straightforward build definition involves the following steps: Utilize "Node Tool Installer (preview)" to set up ...

typescriptazure-devopsazure-pipelines

implementing the reuse of form control names for multiple dropdowns in an Angular application

When using the dropdown menu, I am facing an issue where selecting a value from the second dropdown makes it disappear. This is because both dropdowns are using the same formControlName to pass values to the backend with the same header. How can this be fi ...

angular

Accessing an Excel file in TypeScript using the .xlsx format

After extensive research, I managed to find a solution for reading the .xlsx file in a TypeScript environment. Once implemented, I documented the solution along with a question and answer. The file "demo.xlsx" contains UserIds and Code, displayed in the i ...

node.jsexceltypescriptfilexlsx

Transform a specialized function into a generic function with static typing

First off, I have a network of routes structured like this: interface RouteObject { id: string; path: string; children?: RouteObject[]; } const routeObjects: RouteObject[] = [ { id: 'root', path: '/', children: [ ...

typescript

Eliminate a specific choice from a drop-down menu in an Angular application

I am implementing a feature where clicking on a button adds more select drop downs. I want to ensure that the selected options in these new dropdowns do not duplicate any already chosen options. Below is the code snippet used for the select drop down: < ...

javascriptangulartypescript

What is the best way to create an HTML5 Range that gracefully degrades?

I want to incorporate the <input type='range' /> element from HTML5 for modern browsers and fallback to a <select /> if needed. Since I am working with Ruby-on-Rails, as a last resort, I could implement something similar to this on th ...

javascriptjqueryruby-on-railshtmlprogressive-enhancement