Angular Material Tabs: how to make FLEX fit not overfow

2
votes

so this is the stackblitz demo https://stackblitz.com/edit/angular-wg8jkx

I am trying to achieve a normal header where I have h1 title (to the left) tabs (available width) toolbar (to the right...

so I have this styling... quote straight forward:

.page-header {
  display: flex;

  .page-title {
    flex: 0 0 auto;
  }

  .page-tabs {
    flex: 1 0 auto;
  }

  .page-toolbar {
    flex: 0 0 auto;
  }
}

and in my view I am adding tabs on the fly with something like that

<nav #tabNav mat-tab-nav-bar color="accent">
  <a mat-tab-link *ngFor="let tab of tabs">
    {{ tab }}
  </a>
</nav>

The tabs overflow once I add enough tabs.... what it is suppose to show are the < and > buttons (tab pagination)...

how do I achieve this dynamically?

1
angularflexboxangular-material

1 Answers

1
votes

This can be done by specifying the following css rules:

.page-tabs {
  flex: 1;
  overflow-x: hidden;
}

flex: 1 is a shortcut for flex: 1 1 0%. The key here is to set both flex-grow and flex-shrink to 1.

Only after that overflow-x: hidden can do the magic.

Forked Stackblitz

enter image description here