如何在 JustPy 中将 Aggrid 样式高度设置为 100%答案

【问题标题】：How to set Aggrid style height to 100% in JustPy如何在 JustPy 中将 Aggrid 样式高度设置为 100%
【发布时间】：2022-11-04 15:10:53
【问题描述】：

我正在尝试将 Ag Grid 高度的样式设置为 100%，但表格未显示。我尝试使用视口和像素，它们工作得非常好。宽度，百分比也可以正常工作。

我想要做的是将 Aggrid 表高度适合父 Div。我仍在学习 JustPy 和 python，所以这个问题可能是关于样式的基础知识。

import justpy as jp

grid_options = """
{
    defaultColDef: {
        filter: true,
        sortable: true,
        resizable: true,
        cellStyle: {textAlign: 'center'},
        headerClass: 'font-bold'
    }, 
      columnDefs: [
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ],
      rowData: [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ]
}
"""

def grid_test5():
    wp = jp.QuasarPage()
    c1 = jp.Div(a=wp, classes='q-pa-sm')
    grid = jp.AgGrid(a=c1, options=grid_options, style='height: 100%; width: 100%; margin: 0.25em')
    return wp

jp.justpy(grid_test5)

【问题讨论】：

标签： python ag-grid justpy

【解决方案1】：

看起来你的灵感来自https://github.com/justpy-org/justpy/blob/master/examples/grids_tutorial/creating_grids/grid_test4.py

开箱即用的创建 100% 高度：

您可能想要检查您使用的是当前版本，并且您没有尝试适得其反的样式选项（例如，当您切换到引导程序或其他 javascript 后端时，这些选项可能不起作用）。

你可以在https://justpy-demo.herokuapp.com/grid_test4/ 尝试一下——或者如果这不可用，请按照https://justpy.io/ 的教程设置你自己的基于 docker 或 heroku 的演示浏览器。

【讨论】：