Problems with height of containers with Angular Material Tabs

Question

I'm making an Angular-app using Angular Material, and I'm having big issue with the height of my tab content. This is my first attempt at Angular, but I'm familiar with HTML, CSS and JavaScript.

The situation is that I have an app with the MatSidenav component, and inside the Sidenav content I have a MatTab component, which contains a wrapper to load other components dynamically into new tabs. This all works as I want it to, the problem is the content of the tabs, specifically the tabs that get their content after the tab is created (eg tabs containing components that load data from the REST service).

I've created a stackblitz based on my actual app, to illustrate the problem.

When going to "Test One" from the menu, it only shows the buttons on the top. The "Get Data" button will simply populate the BehaviorSubject that the data table (AgGrid) uses, (sort of an attempt at simulating a REST-call, which the actual app has). All gets populated and shown as I want, but the container element (one of them, I can't for the life of me figure out which one is the actual cuprit) isn't high enough, so the table doesn't actually show. The "Test Two" is just an example of a tab with static content, which displays as I expected (same as the Home-tab really).

I've put a button to toggle the height property of the container-div of the table between 500px and blank. Of course, this would be great if I wanted a static height value of 500px (or any px value), but I want it to be as high as the remaining part of the viewport.

I've tried messing with the dynamicHeight property of the mat-tab-group , but if I turn that off it causes a whole deal of other problems since I have tabs with very variable content heights. I've also tried with various flexbox settings, using both Bootstrap d-flex as well as Angulars own ngFlex, but nothing seems to work.

Now this specific case is for the AgGrid table, but I'm having the same issue with a tab with Google Maps embedded, but I figure if I can solve this one, I'll be able to apply a similar method to fix the maps issue. I'm assuming it is caused by the content changing after the page has been rendered, but that's sort of the point as well, and so that the CSS doesn't seem to keep up confuses the hell out of me.

The only way I've managed to solve this, is by using JavaScript and setting the heights of various elements in ngAfterViewInit and binding an event to window resize, but this seems like a very hack-ish way of doing it, and it also means I have to do it for all components that can be loaded into tabs, not just where I'm currently having problems (because I have to set the height of several of the Tab container elements, which will be the same elements even when tabs are switched).

Any help with this would be greatly appreciated.

Answer 1

I've only used ag-grid sparingly, but I have noticed that they handle height strangely. I think you're missing a 'autoHeight' domLayout property:

<ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-balham mat-elevation-z8"
    [rowData]="loadedData"
    [columnDefs]="agtablecolumns"
    [domLayout]="'autoHeight'"
>
</ag-grid-angular>

Adding that in the stackblitz caused an empty table to appear before any data is retrieved, though. Not sure if that's the goal.