Angular Material Tabs with Fixed Tab Header and Fixed Div In Content

Question

Trying to accomplish this:

And although I have had some success with getting the tab header row fixed, I just can't get the div with the buttons to remain fixed as well (I think because it is part of the tab content and not the tab header)

Any thoughts / solutions? I'm starting to think that the angular material tabs will not work for my UI. Is it possible to build the rendered html for the tabs manually and move the toolbar button div into the tab header container?

https://stackblitz.com/angular/mkdpjkxlemv

Answer 1

Wrap the content below the fixed header to a div

<div class="header">
    <button mat-raised-button>Button 1</button>
    <button mat-raised-button>Button 2</button>
</div>
<div class="content">
     Content
</div>

Give it a fixed height as you desire then set overflow to auto

.content{
  height: 40vh;
  overflow: auto;
  padding: 1em;
}

Here is a fully working example . Hope this helps.