Angular - Remove mat-expansion-panel border & box-shadow

mat-expansion-panel border-radius
mat-expansion-panel scroll content
angular 2 expand collapse panel
mat-expansion-panel animation
mat-expansion-panel content height
mat-expansion-panel-header height
if mat-panel-title is an angular component then verify that it is part of this module
mat-expansion-indicator color

Is there any way to remove the border, I think it's the box-shadow of a mat-expansion-panel from Angular Material? I want it to be all white, so you only would see Text and expansion arrow

<mat-accordion>
 <mat-expansion-panel class="" (opened)="panelOpenState = true"
                   (closed)="panelOpenState = false">

   <mat-expansion-panel-header>

     <mat-panel-title>
       <span class="right">Filter</span>
     </mat-panel-title>

   </mat-expansion-panel-header>

   <p><app-data></app-data></p>

 </mat-expansion-panel>
</mat-accordion>

add mat-elevation-z0 class. Works like a charm, I needed to use that recently.

<mat-accordion>
 <mat-expansion-panel class="mat-elevation-z0" (opened)="panelOpenState = true"
                   (closed)="panelOpenState = false">

   <mat-expansion-panel-header>

     <mat-panel-title>
       <span class="right">Filter</span>
     </mat-panel-title>

   </mat-expansion-panel-header>

   <p><app-data></app-data></p>

 </mat-expansion-panel>
</mat-accordion>

Expansion Panel, MatExpansionPanel extends CdkAccordionItem. <mat-expansion-panel>. This component can be used as a single element to show expandable content, or as  The <mat-expansion-panel>, an Angular Directive, is used to create an expandable detail v/s summary view. <mat-expansion-panel-header> − Represents the header section. Contains summary of panel and acts as control to expand or collapse the panel. <mat-panel-title> − Represents the panel title.

I do it with css:

.mat-expansion-panel:not([class*='mat-elevation-z']) {
    box-shadow: none;
}

Strange border on the first and last <mat-expansion-panel> children , The <mat-expansion-panel-header> shows a summary of the panel content and acts as the control for expanding and collapsing. This header may optionally  Bug, feature request, or proposal: I'm doing recursive embedding of mat-expansion-panel. I tried to reduce the padding-right of the mat-expansion-panel-body but the style .mat-expansion-panel-body { padding: 0 24px 16px; } is always used

You can as well toggle the class mat-expansion-panel by doing

<mat-accordion>
  <mat-expansion-panel [class.mat-expansion-panel]="false">
     ...
  </mat-expansion-panel>
</mat-accordion>

mat-expansion-panel, Which versions of Angular, Material, OS, TypeScript, browsers are affected? The issue seems to be related to "@angular/material" 7.2.0 as it can  Angular Bootstrap Borders Angular borders - Bootstrap 4 & Material Design. Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. Border You may use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

.mat-expansion-panel:not([class*='mat-elevation-z']) {
  box-shadow: 0px 0px 0px -2px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); 
}

This will do.

How to disable Angular Material Expansion Panel animations , Bug, feature request, or proposal: The styles of panels will get messed up in Which versions of Angular, Material, OS, TypeScript, browsers are affected? fix(​expansion): set correct border radius for expansion panels with  Material Design components for Angular. Sprint from Zero to App. Hit the ground running with comprehensive, modern UI components that work across the web, mobile, and desktop. Fast and Consistent. Finely tuned performance, because every millisecond counts. Fully tested across modern browsers. Themeable, for when you need to stay on brand or

mat-Accordion Example, can't be toggled by the user, but can still be manipulated programmatically. It seems like the box-shadow of the first and last <mat-expansion-panel> elements is somehow shifted towards the bottom-right corner as it is too thick on the bottom and right side of those <mat-expansion-panel> elements and it is not present almost at all on the left side.

Angular Accordion/Material Accordion, is an interactive component consisting of panels with headers and content section. These panels can be clicked to expand collapse to show description area. Angular Material Buttons : Mat-Button Example. Angular Material button module MatButtonModule(mat-button,mat-raised-button,mat-icon-button,mat-fab,mat-mini-fab) enhances the user experience of normal buttons (<button>) and anchor (<a>)tags by following Material design principles.

mat-expansion-panel-shadows, ) and stacked headers that expand or collapse one or more panels at a time within the available space. Each "mat-expansion-panel" has a child element: "mat-expansion-panel-content". This element is hidden with CSS style (visibility: hidden;) when the mat-expansion-panel is minimized/closed. Due to this there is a big performance issue, since the browser need to handle all of these hidden DOM objects.

Comments
  • Take a look at the theming guide, and remove it with CSS
  • @Sergi Sadly i don't know. Try to inspect styles with DevTools
  • To remove hover style .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: white; }
  • Easy & short. Couldn't be any better!