Question

我无法在移动视图中看到相同的ag网格视图。这应该是一个混合应用程序。如何使它在移动设备中看起来也一样？

我尝试使用高度和宽度的百分比比例，但仍然无法解决问题。

<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>

我希望移动视图和桌面视图具有完整的网格。

Answer 1

ag-grid的容器div的问题在于您将绝对值设置为500px，这就是为什么无论设备大小如何，ag-grid只会占据500px的高度。

如果您打算填满整个视口，我建议您改用视口高度。的CSS属性为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>

我已经通过here进行了演示。您可以使用stackblitz上的“在新窗口中打开”标签打开，以不同的视口尺寸查看它们。

离子4和Ag-Grid

1 个答案: