Same height for multiple tabs

Dear @1001albertpadilla

You can try to add height to .tab-content class.

styles.scss:

.tab-content {
  height: 250px;    
  overflow-y: scroll;
}

Example: HTML

<!-- Nav Tabs -->
<mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-3'" [contentClass]="'card'">
  <!--Panel 1-->
  <mdb-tab heading="Profile">
    <div class="row">
      <div class="col-12">
        <table mdbTable>
          <thead>
            <tr>
              <th *ngFor="let head of headElements" scope="col">{{ head }}</th>
            </tr>
          </thead>
          <tbody>
            <tr mdbTableCol *ngFor="let el of elements">
              <th scope="row">{{ el.id }}</th>
              <td>{{ el.first }}</td>
              <td>{{ el.last }}</td>
              <td>{{ el.handle }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 2-->
  <mdb-tab heading="Follow">
    <div class="row">
      <div class="col-12">
        <table mdbTable>
          <thead>
            <tr>
              <th *ngFor="let head of headElements" scope="col">{{ head }}</th>
            </tr>
          </thead>
          <tbody>
            <tr mdbTableCol *ngFor="let el of elements2">
              <th scope="row">{{ el.id }}</th>
              <td>{{ el.first }}</td>
              <td>{{ el.last }}</td>
              <td>{{ el.handle }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 3-->
  <mdb-tab heading="Contact">
    <div class="row">
      <div class="col-12">
        <br />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
          Tempora, placeat ratione porro voluptate odit minima.
        </p>
      </div>
    </div>
  </mdb-tab>
</mdb-tabset>

TS

  elements: any = [
    { id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
    { id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
    { id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
    { id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
    { id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
    { id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
  ];
  element2s: any = [{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' }];

  headElements = ['ID', 'First', 'Last', 'Handle'];

Hope it helps!

Best Regards, Bartosz.

Hi!

Try this:

TS

  @ViewChild('staticTabs', { static: true }) staticTabs: TabsetComponent;
  constructor(private renderer: Renderer2) {}
  ngAfterViewInit() {
    this.renderer.addClass(this.staticTabs.tabs[0].el.nativeElement, 'tab-class');
    this.renderer.addClass(this.staticTabs.tabs[1].el.nativeElement, 'tab-class');
  }
  elements: any = [
    { id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
    { id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
    { id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
    { id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
    { id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
    { id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
  ];
  element2s: any = [{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' }];

  headElements = ['ID', 'First', 'Last', 'Handle'];

styles.scss

.tab-class {
  height: 250px;
  overflow-y: scroll;
  overflow-x: hidden;
}

HTML as in the example above.

Hope it helps!

Best Regards, Bartosz.