pythoncssag-gridjustpy

How to set Aggrid style height to 100% in JustPy

I am trying to set the style of Aggrid heigth to 100% but the table does not show. I tried using viewport and pixel, they worked perfectly fine. Fow the width, percentage is also working fine.

What I want to do is to fit the Aggrid table height to the parent Div. I am still learning JustPy and python in general so this question might be about fundamentals of styling.

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

  • See also https://github.com/justpy-org/justpy/discussions/592

    It looks like you are inspired by https://github.com/justpy-org/justpy/blob/master/examples/grids_tutorial/creating_grids/grid_test4.py

    Which out of the box is creating a 100% height effect by using 99vh as the setting. Not using 100vh seems to be on purpose given the followup and sideeffects 100vh/100% may have: 100% height AG-Grid

    You might want to check that you are using a current version and that you are not doing trying counter productive styling options (which might e.g. not work when you switch to bootstrap or other javascript backends).

    You can try things out at https://justpy-demo.herokuapp.com/grid_test4/ - or if that is not available follow the tutorial at https://justpy.io/ to set up your own docker or heroku based demo browser.

    If you come up with a better solution you are welcome to open an issue and a pull request for justpy.