Angular Material mat-tabs all have different heights

Question

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:

Second tab:

See how the heights of the content are different

can you explain little further, so you need to have a fixed height of the tab, what would be an example when they are of different heights? https://stackblitz.com/angular/omljmxpjqom?file=src/app/tab-group-align-example.html — AlexFF1, Mar 31 '21 at 23:38
Hi @AlexFF1 for example: https://stackblitz.com/edit/angular-cyuyzk?file=src/app/tab-group-align-example.html — Onion, Apr 01 '21 at 13:35
check this https://stackblitz.com/edit/angular-cyuyzk-akafvh?file=src/app/tab-group-align-example.css — AlexFF1, Apr 01 '21 at 14:00
@AlexFF1 Thanks! It is going to the right direction. But what if I don't want to set a specific height - like you had there `height: 5em`, I don't want any content to be overflown, so the height should take the tallest tab — Onion, Apr 01 '21 at 14:46
something similar here https://codepen.io/rkaravia/pen/BaoRozw — AlexFF1, Apr 01 '21 at 15:46
Thanks again, I think there are differences between normal `div` and `mat-tab-group`, I don't think `display: block;` and everything else combined works — Onion, Apr 01 '21 at 15:55
angular material uses a lot flex rules in their mat-tab-group. So its just a matter of overriding some of their stuff. — AlexFF1, Apr 01 '21 at 16:02
I see, but I think I have tried many different things. Could you give me an example where this situation works with `mat-tab-group`? — Onion, Apr 01 '21 at 16:06

score 2 · Answer 1 · answered Apr 01 '21 at 18:02

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

naveen · Answer 2 · 2021-07-01T12:17:10.063

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;`);
  });
}

Angular Material mat-tabs all have different heights

2 Answers2