Angular Material mat-tabs all have different heights

user_12800794 0
Viewed 826

I wish to have all the tabs have the same height, no matter what contents are inside.

The tabs reside inside a div. Preferably I don't need to set a fixed height for this div, but instead the div should have the height of the mat-tab that has the most stuff.

Haven't found anything really works yet, if someone could help that will be wonderful!

My current code:

HTML:

<div fxLayout="column" style="min-height: 100%; height: 100%">
  <mat-tab-group style="height: 100%">
    <mat-tab label="1">
      <mat-card fxFill class="mat-elevation-z4 about-card">
        this mat-card contains the most amount of stuff
      </mat-card>
    </mat-tab>
    <mat-tab label="2">
      <mat-card fxFill class="mat-elevation-z4 about-card">
      ...a bunch of things
      </mat-card>
    </mat-tab>
    <mat-tab label="3">
      <mat-card fxFill class="mat-elevation-z4 about-card">
      ...a bunch of things
      </mat-card>
    </mat-tab>
  </mat-tab-group>
</div>

CSS:

.about-card {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px;
  padding: 16px;
  border-radius: 8px;
}

Edit: Some boilerplate example:

First tab:
pic1

Second tab:
pic2

See how the heights of the content are different

mat-tab angular-material
2 Answers

This is a solution using javascript. You need to get the element with the max height and update the height of mat-tab-body-wrapper container :

 ngAfterViewInit() {
    const groups = document.querySelectorAll("mat-tab-group");
    groups.forEach(group => {
      const tabCont = group.querySelectorAll("mat-tab-body");
      const wrapper = group.querySelector(".mat-tab-body-wrapper")
      const maxHeight = Math.max(...Array.from(tabCont).map(body => body.clientHeight));
      wrapper.setAttribute("style", `min-height:${maxHeight}px;`);
    });
  }

You can transform it using the angular API

user_143498080

Try this.

<mat-tab-group #myTabGroup id="myTabGroup">

ngAfterViewInit() {
  this.setTabHeights();
}

@HostListener('window:resize', ['$event'])
handleResize(event: Event) {
  this.setTabHeights();
}

setTabHeights() {
  const tabCardBody = document
    .querySelectorAll('mat-tab-group#setupWarehouseDataTab mat-tab-body');
  if (!tabCardBody) return;
  const maxHeight = Math.max(...Array.from(tabCardBody)
    .map((elm: any) => elm.clientHeight));
  tabCardBody.forEach((elm => {
    elm.setAttribute('style', `height:${maxHeight}px;`);
  });
}
naveen_174470
Related