时间戳

首页 > 解决方案 > Ionic 4 和 ag-grid

ionic4 - Ionic 4 和 ag-grid

问题描述

我在移动视图中看不到相同的 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>

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

标签： ionic4ag-grid

解决方案

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

我在这里做了一个演示。您可以使用 stackblitz 上的“在新窗口中打开”选项卡在不同的视口大小上查看它们。

推荐阅读