离子4和ag-grid

Question

I cant see the same view of ag grids in mobile view. This is supposed to be a hybrid app. what should I do to make it look same in mobile as well?

I have tried using the percentage scale of height and widths but still cant resolve the issue.

<ion-content>
    <div style="height:500px"> 
       <ag-grid-angular 
            style="width: 100%; height: 100%;" 
            class="ag-theme-balham"
            [rowData]="rowData" 
            [columnDefs]="columnDefs"
        >
        </ag-grid-angular>
    </div>
</ion-content>

I want the mobile view and desktop view to have the complete grid.

Answer 1

The problem with container div of your ag-grid is that you are setting an absolute value of 500px, which is why your ag-grid will only occupy 500px in height, regardless of the device size.

If your intention is to fill up the entire viewport, I would recommend you to use viewport height instead. The CSS property for that is vh .

<div style="height:100vh">
  <ag-grid-angular 
    style="width: 100%; height: 100%;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    >
  </ag-grid-angular>
</div>

I have made a demo over here . You may open use the 'open in new window' tab on stackblitz to view them on different viewport sizes.