I have problems with the correct scaling of the Ag grid.

The width automatically adapts to the page, but not the height. I've already tried a lot with CSS, but got no further. Many of these attempts have changed nothing and I don't know what to do next.

The result should be like this. In this demo the grid is responsive.

I have Angular 11.2.10 and Ag-Grid 25

HTML

<div class="card-body">
     <div class="grid-wrapper">
        <ag-grid-angular
          #agGrid
          style="width: 100%; height: 100%;"
          id="myGrid"
          class="ag-theme-alpine"
          [columnDefs]="columnDefs"
          [defaultColDef]="defaultColDef"
          [sideBar]="sideBar"
          [groupSelectsChildren]="true"
          [debug]="true"
          [rowSelection]="rowSelection"
          [rowGroupPanelShow]="rowGroupPanelShow"
          [pivotPanelShow]="pivotPanelShow"
          [enableRangeSelection]="true"
          [pagination]="true"
          [paginationPageSize]="paginationPageSize"
          [paginationNumberFormatter]="paginationNumberFormatter"
          [autoGroupColumnDef]="autoGroupColumnDef"
          [groupMultiAutoColumn]="true"
          [animateRows]="true"
          [rowData]="elements"
          (gridReady)="onGridReady($event)">
        </ag-grid-angular>
      </div>
    </div>

TypeScript

export class ActiveElementListComponent {

  private gridApi: any;
  private gridColumnApi: any;
  public autoGroupColumnDef: any;

  public defaultColDef: any;
  public rowSelection;
  public rowGroupPanelShow;
  public pivotPanelShow;
  public paginationPageSize: any;
  public paginationNumberFormatter: any;
  public sideBar: any;
  public suppressDragLeaveHidesColumns: any;
  public suppressMakeColumnVisibleAfterUnGroup: any;

  columnDefs = [//ColumsDefs...];

  // @ts-ignore
  elements: Element[];

  constructor(private http: HttpClient, private elementService: ElementService) {
    this.defaultColDef = {
      enableRowGroup: true,
      enablePivot: true,
      enableValue: true,
      sortable: true,
      resizable: true,
      athleteFilter: true,
      minWidth: 100,

    };

    this.sideBar = {toolPanels: ['columns']};
    this.rowSelection = 'multiple';
    this.rowGroupPanelShow = 'always';
    this.pivotPanelShow = 'always';
    this.paginationPageSize = 100000;
    this.suppressDragLeaveHidesColumns = true;
    this.suppressMakeColumnVisibleAfterUnGroup = true;
    this.paginationNumberFormatter = function (params: any) {
      return params.value.toLocaleString();
    };
  }

  onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.elementService.getActiveElements().subscribe(data => {
      this.elements = data;
    });
  }

  onColumnRowGroupChanged(params: any) {
    let columnStateParams: { colId: any; hide: boolean; }[] = [];

    //The ag-grid is not enlarging based on the page height,
    //so dynamically adjusting the height of the grid
    //This does'nt work!

    this.gridApi.setDomLayout("autoHeight");

    params.columns.forEach((col: { getColId: () => any; }) => {
      columnStateParams.push({colId: col.getColId(), hide: true});
    });

    params.columnApi.applyColumnState({
      state: columnStateParams,
    });
  }

CodePudding user response：

In the example you link to the body and html elements in the page are styled to height: 100% and the parent divs of the grid are display:flex The page is sizing the grid div to fit.

This stack overflow answer might help: How to make a div 100% height of the browser window

You may also have to set the height or display style for the parent elements:

<div class="card-body">
     <div class="grid-wrapper">

In the past, to avoid setting the body and height values in the html, I've set the grid to a 100% style as you have done, and added a fixed px size to the wrapper div and then after the page loaded, resized the height of the wrapper div using javascript.