I require assistance in styling angular material tabs.
Please refer to this link for the issue: https://stackblitz.com/edit/angular-6-material-tab-problem?file=app/tab.component.html [Edit: The stackblitz example is working correctly after implementing the changes mentioned]
The layout of the first tab is almost perfect:
- There is an overflow-y scrollbar available when the content within mat-card-content exceeds the visible space inside the tab.
- No scrollbars on the mat-card or mat-tab elements - they should resize appropriately.
- Upon window resize, the height of the mat-tab-group might increase - the mat-card-content should also grow taller and become scrollable if necessary.
https://i.sstatic.net/vb0je.png
However, there is an issue when the length of the contents in the mat-card-content does not exceed the height of the tab.
For instance, with the same styling, the second tab is not displaying correctly. The red rectangle of the mat-card should fill the entire height of the mat-tab. Additionally, there is an unnecessary scrollbar on the far right.
https://i.sstatic.net/aIUGO.png
Below is the template:
<mat-tab-group>
<mat-tab label="Properties">
<mat-card class="scrollable-content">
<mat-card-header>
<mat-card-title>Card Data</mat-card-title>
</mat-card-header>
<mat-card-content>
My Content for this card...<br>
... Lots and lots of content
</mat-card-content>
</mat-card>
</mat-tab>
<mat-tab label="2nd Tab">
<mat-card class="scrollable-content">
<mat-card-header>
<mat-card-title>Other Stuff</mat-card-title>
</mat-card-header>
<mat-card-content>
2nd Tab
</mat-card-content>
</mat-card>
</mat-tab>
</mat-tab-group>
The CSS code is as follows:
.mat-card.scrollable-content{
overflow: hidden;
display: flex;
flex-direction: column;
}
.mat-card.scrollable-content mat-card-content {
overflow-y: auto;
}
.mat-card.scrollable-content mat-card-title {
display: block;
}
.mat-tab-group {
height: 400px;
border: 2px solid #00F;
}
.mat-card-content {
border: 2px solid #0F0
}
.mat-card-title {
font-weight: bold;
font-size: 1.25em !important;
}
.mat-card {
border: 2px solid #F00;
height: 85%;
}
.mat-tab-label{
font-weight: bold;
font-size: 1.25em;
}