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

0
votes

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

1
cssangularangular-materialcss-grid
The stackblitz project is not the same as in your attached image, but I suggest to wrap the content below the fixed header to a div, give it a fixed height then set overflow: auto. – Quan VO
Thanks @QuanVO , I will give it a shot. Problem might be that the mat-* directives render the html. I don't have control over the html that gets generated (as far as I know) – Jason Smith
I just created stackblitz.com/edit/angular-tab-custom, tell me if it's ok. – Quan VO
@QuanVO Thank you so much. I guess I was over-thinking this (not the first time). The beauty of your solution is it's simplicity. I added this to the height to meet my specific needs so there is only one scrollbar when the total height of the windows is less than the height of the content. .content{ height: calc(100vh - 200px); overflow: auto; padding: 1em; // border: 1px solid blue; } How do I accept your comment is the solution? – Jason Smith
@Jasonc Glad to help. I will write it as an answer. Plz accept it then. – Quan VO

1 Answers

1
votes

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.