Tips on how to turn off the background when the sidenav is opened

Utilizing angular material sidenav for application settings, aiming to achieve a layout similar to Google's. However, I am invoking this sidenav from another component and enclosing the router, so it opens beneath the application header.

<mat-sidenav-container class="main-sidenav">
      <app-sidenav></app-sidenav>
    
      <router-outlet></router-outlet>
    </mat-sidenav-container>

The issue arises when opening the sidenav as it fails to disable the background, lacking an automatically applied backdrop style. Is there a way to explicitly provide styling or should we explore alternative components? Your suggestions are welcome. Find a sample stackblitz example below for reference:

Stackblitz link

htmlcssangularangular-material

Answer №1

To enable a dark shadow backdrop, set the hasBackdrop flag to true in your HTML:

<mat-sidenav-container class="main-sidenav" hasBackdrop="true">
      <app-sidenav></app-sidenav>

      <router-outlet></router-outlet>
    </mat-sidenav-container>

According to the Material documentation on sidenavs: https://i.sstatic.net/h8PId.png

After inspecting the elements on your Stackblitz project, I found that the backdrop is rendering correctly:

https://i.sstatic.net/Pd34O.png

If you are not seeing the desired dark shadow effect, it may be due to missing CSS. To resolve this, include the following in your styles.css file:

.mat-drawer-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

Additionally, for the sidenav to resemble the screenshot provided in your question, apply some CSS properties to the sidenav class:

.sidenav {
  margin-top: 35px;
  margin-left: 25px;
  display: block;
  width: 200px;
  height: 100%;
  position: fixed;
  background: #FFF;
}

Expected Result:

https://i.sstatic.net/gDfsW.png

For a live demonstration, check out the Stackblitz demo.

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

Reactively created menu using JQuery

Looking to implement a dynamic JQuery menu using React (ES6). Utilizing the JQuery menu examples (https://jqueryui.com/menu/) as a guide, however, those examples only cover static menus. It doesn't clarify how to modify menu items like updating labels ...

javascriptjqueryhtmljsonreactjs

Utilize jQuery to automatically assign numbers to <h1-h6> headings

Looking to develop a JavaScript function that can automatically number headings (h1- h6) for multiple projects without relying on CSS. Currently achieving this with CSS: body { counter-reset: h1; } h1 { counter-reset: h2; } h2 { counter-reset: h3; } ... T ...

javascripthtmljquerycssfunction

Disabling the functionality of the buttons for adding, editing, and deleting

In my Angular asp.net core web api project, I am looking to implement dynamic buttons. Specifically, when the status of a product is "Z", I need to disable the add, edit, and delete functionality. I have a method that works for this scenario, but I am uns ...

asp.netangulartypescriptasp.net-web-api

Webview displaying a blank screen following the most recent Chrome update

I am encountering a problem that has been asked previously, but I am struggling to find a solution. The issue arises when I try to play an embedded video URL on the Webview and filter out other undesirable URLs using shouldOverrideUrlLoading. Whenever I cl ...

androidhtmlandroid-webviewgoogle-chrome-app

Is it possible to have Angular and Node.JS Express running on the same port?

It seems like I may have a duplicated question, but I'm struggling to figure out how to properly configure and run the frontend and backend together. I've looked into solutions on this and this questions, but I'm still confused. Currently, ...

node.jsangularexpressangular5

What is the best way to choose all the checkboxes in a checkbox list, such as a ToDo List?

I am currently working on developing a to-do list where each item includes a checkbox. My goal is to be able to select these checkboxes individually by clicking on them. Furthermore, I would like the checkboxes to toggle between being checked and unchecked ...

javascripthtmlcssaddeventlistener

Unable to update the value of the p-editor component in PrimeNG

After creating a form with the p-editor element for rich formatted text entry, a problem arose when attempting to update the form with server values using Angular's reactive form patchValue method. The editor does not update as expected with the new v ...

angularquillp-editor

The design of the website is all over the place

I am encountering challenges in creating distinct containers for the header, body, and other sections of my website. The layout is not turning out as planned, and I can't pinpoint where my code is going wrong. Any advice or suggestions on how to resol ...

htmlcss

The ellipsis feature is malfunctioning when applied to labels

Hey there, I'm looking to style my label with an ellipsis effect that is inside a UL element. I have tried adding max width and min width for the UL, along with ellipsis and overflow hidden for the label. However, this causes the label content to be p ...

htmlcss

Testing in Angular using the getByRole query functionality is successful only when the hidden: true option is utilized

Currently experimenting with a new library, I'm facing difficulties accessing elements based on their ARIA role. My setup includes angular 10.0.6, jest 26.2.1, along with jest-preset-angular 8.2.1 and @testing-library/angular 10.0.1. Following instru ...

angularjestjsangular-testing-library

The form fails to submit despite the function returning true

I've created the code below, which is causing issues with form submission in both scenarios. $(document).ready(function() { $('#password_result_success').hide(); $('#password_result_error').hide(); $('#current_passwor ...

javascriptjqueryhtmlregex

It appears that the input variables in Angular (5) are experiencing some issues

After upgrading my Angular project from version 4 to 5, I've noticed some unexpected changes in the behavior of my components. In my application, there is a ParentComponent and a ChildComponent. The ChildComponent receives an InputObject from its par ...

angular

Animations in Angular fail to operate within mat-tabs after switching back when custom components are being utilized

I am facing a similar issue as Olafvv with my angular 16 project. The problem occurs in a mat-tab-group where the :enter animations do not work when navigating away from a tab and then returning to it. However, in my case, the issue lies within a custom su ...

htmlangularanimationmat-tab

Is it possible to adjust the left property following the concealment of an element with JQuery?

My goal is to move an image element using the 'left' property after hiding a div. To achieve this, I am using JQuery's '.promise()' function. Here is my code: HTML code: <div id="outerContainer"> <div id=" ...

jqueryhtmlcss

Variables disappearing after hiding the flash application

In the div, I have a flash file embedded. This div is initially visible with display:block;. There are two other sister divs alongside this one. All three divs are controlled by jQuery tabs, which means when a different tab is clicked, the current visible ...

htmlcssflashdata-loss

Issue with Bootstrap modal not displaying in the center as expected

screenshot of the page Hey there, I'm struggling to understand why this modal is displaying incorrectly. I copied the code from the bootstrap website. Here it is: <button type="button" class="btn btn-info btn-lg" (click)="showPerformedActivityMod ...

htmlmodal-dialogbootstrap-4bootstrap-modal

Issues with incorrect sizing in Safari when using rem units alongside animations

UPDATE: After further testing, it appears that the code functions correctly within the SO snippet view. To replicate the issue, please copy the code and save it locally. UPDATE 2: Odd behavior detected. Refer to this gist and video for more information. ...

htmlcsssafaribootstrap-4

Why does running the code result in the error mentioned above?

Uncaught ReferenceError: Unable to process binding "value: function (){return sumValBinding }" Message: sumValBinding is not defined Here is the HTML code snippet: <div class="form-group"> <label for="inputdefault">First numbe ...

javascriptjqueryhtmlknockout.js

Tips for seamless integration of Django and Angular routing

How can I make the Angular 2 URL work with Django in an Angular 2 app served by Django, even when reloading the page? For example, let's say a Django-served page has the URL http://localhost:8000/home. On this page, there are 3 tabs and one of them c ...

djangoangular

What steps are involved in creating a webpage cleaner similar to Arc90's Readability or Instapaper?

Curious about cleaning up an HTML page to present it in a more polished manner - eliminating clutter and restructuring the main text for better readability, similar to resources like or Instapaper. Would the process involve basic page parsing and filteri ...

htmlparsing