CODEWITHSUNDEEP
angularangular-material
Shafkhan
Shafkhan

Reputation: 524

Show Angular Material Tabs in two (2) rows

I am building a tabs component using Angular Material Tabs and as the number of tabs increase, it automatically starts scrolling horizontally. Instead of doing that, I want to break the tabs and show them in two (2) rows. How do I do this?

You can find the code here: StackBlitz

Please help me get this done.

Upvotes: 3

Views: 1599

Answers (1)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9903

By default .mat-tab-labels has display:flex if you want to show all tabs in two lines or more you can use display: block.

So you can solve this problem by css like this:

::ng-deep .mat-tab-labels {
  /* display: flex; */ default display is flex change to block
  display: block !important;
}

ForkedStackblitz

And the result:

enter image description here

Upvotes: 4

Related Questions