CODEWITHSUNDEEP
angularangular-material
PSAU
PSAU

Reputation: 63

Mat-expansion-panel without Body

Angular 6... I have an accordian grouping multiple mat-expansion-panels.

The panels represent menu options, which when expanded, have a nav-list of sub-menu options.

Some menu options (ie, some mat-expansion-panels), do not have submenus. They can be selected in their own right, by clicking the header, and should open nothing.

I've excluded writing out any panel content (so have no nav-list elements after the header) using *ngIf, but still, a body is inserted and clicking on the header, opens up an empty body by about 10 pixels.

How do i make the panel header be clickable, but without any body content displayed ?

Thanks

Upvotes: 0

Views: 3473

Answers (3)

Elazar Zadiki
Elazar Zadiki

Reputation: 1137

a better way in my opinion would be hiding the expanded content with CSS, instead of applying max-height or pointer-events: none, which both can be problematic in some cases (like if the content overflows, and pointer-events actually renders it unusable as a link).

so just adding a class to mat-panel-expansion that would hide the content, clearing height, and setting min-height would do the trick perfectly:

Example:

HTML:

  <mat-expansion-panel
          *ngFor="let option of sideBarOptions"
          [hideToggle]="option.subMenu ? false : true"
          [ngClass]="{ 'no-expansion': !option.subMenu }"
        >

CSS:

::ng-deep .no-expansion {
   .mat-expansion-panel-content {
       display: none !important;
       visibility: hidden !important;
   }
}
    
::ng-deep mat-expansion-panel-header {
    min-height: 50px;
    height: unset !important;
}

::ng-deep .mat-expansion-panel-header.mat-expanded {
             height: unset !important;
}

Upvotes: 0

Jakub
Jakub

Reputation: 539

A quick & dirty solution:

Add a class .dont-open with pointer-events: none; + cursor:default; to the <mat-expansion-panel-header> you want to keep closed. If you use tailwind, add the following two classes pointer-events-none cursor-default.

Edit: To remove the toggle arrow, add the following directive hideToggle to the parent <mat-expansion-panel>.

Example (using tailwind classes)

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header class="pointer-events-none cursor-default">
      <mat-panel-title>Title</mat-panel-title>
      <mat-panel-description>
        Description
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
</mat-accordion>

Upvotes: 0

G. Tranter
G. Tranter

Reputation: 17918

You probably should not use an expansion panel as a menu, because they're not designed to work that way - as you are experiencing.

You can't effectively turn off expansion except by disabling the expansion panel, but that will make the header look disabled as well. If you force your header content to not look disabled, then you can use:

<mat-expansion-panel disabled>

Otherwise, you can try these hacks:

Faking the look of an expansion panel

<div class="mat-expansion-panel" style="height: 48px; border-radius: 0;">
  <div class="mat-expansion-panel-header" style="height: 48px;">
    <mat-panel-title>
      Title
    </mat-panel-title>
    <mat-panel-description>
      Description
    </mat-panel-description>
  </div>
</div>

Forcing expansion panel to look like it isn't expanded (or expandable):

<mat-expansion-panel class="no-body">
  <mat-expansion-panel-header class="no-body">
    <mat-panel-title>
      Title
    </mat-panel-title>
    <mat-panel-description>
      Description
    </mat-panel-description>
  </mat-expansion-panel-header>
</mat-expansion-panel>

.no-body {
  max-height: 48px;
}
.no-body.mat-expansion-panel-header >>> .mat-expansion-indicator {
  display: none;
}

Upvotes: 1

Related Questions