Opening angular material expansion panel vertically

Question

I want to open the expansion panel in vertical mode (i.e it slide to either right or left).

I followed the basic tutorial as described on the angular material site here

Here is the code for the same.

HTML

<md-expansion-panel>
  <md-expansion-panel-header>
    <md-panel-title>
       Personal data
    </md-panel-title>
   <md-panel-description>
      Type your name and age
   </md-panel-description>
 </md-expansion-panel-header>

<md-form-field>
   <input mdInput placeholder="First name">
 </md-form-field>

 <md-form-field>
    <input mdInput placeholder="Age">
  </md-form-field>
</md-expansion-panel>

Typescript code for teh same is

import {Component} from '@angular/core';
@Component({
    selector: 'expansion-overview-example',
    templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}

Do anyone have an idea how to open the above expansion panel vertically.

Answer 1

You may tweak it by moving your panel content to a container and adding some CSS.

1. In your HTML add your panels content to an extra container with class "panel-content":

<mat-accordion multi="true">
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Some title
      </mat-panel-title>
      <mat-panel-description>
        Some description
      </mat-panel-description>
    </mat-expansion-panel-header>
    <div class="panel-content">
      <p><strong>Panel Content</strong>If you ask Chuck Norris what time it is, he always says, "Two seconds 'til." After you ask, "Two seconds 'til what?" he roundhouse kicks you in the face, The quickest way to a man's heart is with Chuck Norris' fist Even corn flakes become deadly weapons in the hands of Chuck Norris.</p>
      <p>More content</p>
    </div>
  </mat-expansion-panel>
  ...
</mat-accordion>  

2. Add stylings to your CSS:

The CSS basically rotates the whole accordion at first and then rotates back only the content of the panel.

The positioning is a bit tricky due to the rotation. Be aware that if you want to adjust the height of the accordion you'll need to set the width.

/* Accordion with height 600px and panel content width of 400px each */
.mat-accordion {
  display: block;
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-600px); /* rotate and position it; translateX value corresponds to panel height */
  width: 600px; /* this will be the height of the accordion (inversed due to rotation) */
}

.mat-expansion-panel {
  max-height: 500px; /* this will be the width of the panel (inversed due to rotation) */
}

.panel-content {
  transform-origin: top left;
  transform: rotate(90deg); /* rotate back */
  margin-left: 100%; /* position it */
  height: 600px; /* real height of the content */
  width: 400px; /* real width of the content */
}

If the accordion should fill the viewport from top to bottom use 100vw and 100vh instead of pixel values, e.g.

/* Accordion with 3 panels, stretching from top to bottom */
.mat-accordion {
  display: block;
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-100vh); /* rotate and position it; translateX value corresponds to panel height */
  width: 100vh; /* this will be the height of the accordion (inversed due to rotation) */
}

.mat-expansion-panel {
  max-height: calc(100vw / 3); /* this will be the width of the panel (inversed due to rotation), 3 is panel amount */
}

.panel-content {
  background-color: lightblue;
  transform-origin: top left;
  transform: rotate(90deg); /* rotate back */
  margin-left: 100%; /* position it */
  height: 100vw; /* real height of the content */
  width: calc(100vw / 3 - 100px); /* real width of the content, 3 is panel amount */
}