CODEWITHSUNDEEP
angularjslayouttabsag-grid
Stealth Rabbi
Stealth Rabbi

Reputation: 10346

Using an ag-grid inside an md-tab

I've used ag-grid, and have followed the rule of having the parent div of the page define an explicit height so that I can set a maximum height on the grid, allowing scrolling, rather than growing in heigh indefinitely. So, I have something like this:

<div ng-controller="MyController as myCtrl" style="box-sizing: border-box; padding-top: 5px; width: 100%; height: 90%">

...
   <div ag-grid="myGridOptions" class="ag-blue" style="width: 100%; height: 55%"></div>

This works fine, and the percentage behave as you'd expect.

I'd now like to set up some tabs using the angular material md-tabs. When I put my ag-grid inside the tabs, it seems that the height value I've set isn't high enough. I assume that it's using the height of the md-tab or the md-tabs, however, I'm not sure how/if I can explicitly set the height of the tab. I've tried doing so with a 'style' attribute, but it seems to have no effect.

I assume I need to force the tab, or tab container to be a certain height, but I'm not sure how to do this.

<div ng-cloak>
    <md-tabs md-border-bottom >
        <md-tab label="Tab1" >
            <div ag-grid="myGrid2Options" class="ag-blue" style="width: 100%; height: 70%;"></div>

Upvotes: 2

Views: 1859

Answers (1)

Leguest
Leguest

Reputation: 2137

You could try add md-dynamic-height at <md-tabs>

Documentation: https://material.angularjs.org/latest/api/directive/mdTabs

<div ng-cloak>
<md-tabs md-border-bottom md-dynamic-height >
    <md-tab label="Tab1" >
        <div ag-grid="myGrid2Options" class="ag-blue" style="width: 100%; height: 70%;"></div>

Upvotes: 1

Related Questions