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.
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;
}
And the result:
