1

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)
Wolfgang Fahl
  • 15,016
  • 11
  • 93
  • 186
Kanda
  • 67
  • 5
  • please add a screenshot to show the difference between what you expect and what you get. I also added the "CSS" tag - there are over 700.000 similar questions discussed in stackoverflow which might give you a hint on how to achieve your goal. Justpy doesn't do the styling it only transports the style information. – Wolfgang Fahl Nov 04 '22 at 08:24

1 Answers1

0

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.

Wolfgang Fahl
  • 15,016
  • 11
  • 93
  • 186
  • Thanks. If I am not mistaken. It uses the default style of 99vh. self.style = "height: 99vh; width: 99%; margin: 0.25rem; padding: 0.25rem;" as it is written in: https://github.com/justpy-org/justpy/blob/master/justpy/gridcomponents.py#L50 If I have QHeader which by default is 50px in height then the grid height is still 99vh. What I want is the grid is only fill to the height left by the header or if it is inside a div, I want it to inherent the height of div (or maybe QCard). So if possible, I want to use heigth:100% – Kanda Nov 04 '22 at 08:22
  • I assume Eli decided for 99vh due to https://stackoverflow.com/questions/72818802/why-does-100vh-produce-horizontal-and-vertical-scroll-bar. 100vh seems to have followup issues and may be you see similar problems. – Wolfgang Fahl Nov 04 '22 at 08:27