CODEWITHSUNDEEP
cssangularangular-materialcss-grid
Jason Smith
Jason Smith

Reputation: 333

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

Trying to accomplish this:

enter image description here

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

Upvotes: 0

Views: 1626

Answers (1)

Quan Vo
Quan Vo

Reputation: 1336

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.

Upvotes: 1

Related Questions