Setting Aggrid style height to 100% makes the grid collapse

[masykur8d]

Sorry if this is not a justpy issue. I have been struggling to make the Aggrid fill the height to 100% of the parent but it shows only a line.
My code looks like this:

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)

Someone pointed out the same question before:
https://stackoverflow.com/questions/42400979/ag-grid-height-100-collapsed

I also have asked in wider community but no answer so far:
https://stackoverflow.com/questions/74259313/how-to-set-aggrid-style-height-to-100-in-justpy

is there any way to use the style='height: 100%; width: 100%; margin: 0.25em' in quasar page?
Thanks

[WolfgangFahl]

see https://stackoverflow.com/a/74313363/1497139

[masykur8d]

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)

Please look at this example for my dashboard.

import justpy as jp
import pandas as pd

lorem = 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.'
wm_df = pd.read_csv('https://elimintz.github.io/women_majors.csv').round(2)

async def toogleLeftDrawer(self, msg):
    self.c6.value = not self.c6.value
    # self.c6.toggle()

async def toggleDrawer(self, msg):
        await self.c6.run_method("toggle()", msg.websocket)

async def openNewUrl(self, msg):
    jp.run_task(msg.page.run_javascript(f"window.open('{self.href}', '_blank').focus()"))

def grid_test5():
    wp = jp.QuasarPage()
    c1 = jp.QLayout(view='hHh Lpr lFf', classes='bg-white', a=wp)
    c2 = jp.QHeader(elevated=True, a=c1, classes='bg-grey-7')
    c3 = jp.QToolbar(a=c2)
    c4 = jp.QBtn(flat=True, dense=True, round=True, aria_label='Menu', icon='menu', a=c3, click=toggleDrawer, immediate=True, debounce=0)
    c5 = jp.QToolbarTitle(a=c3, text='Test Dashboard')
    c6 = jp.QDrawer(v_model='drawer', show_if_above=True, bordered=True, classes='bg-blue-grey-9', a=c1)
    c4.c6 = c6
    c6_1 = jp.QScrollArea(a=c6, classes='fit')
    c7 = jp.QList(a=c6_1)
    c8 = jp.QItemLabel(header=True, a=c7, text='Selected Accounts:')
    c9 = jp.QItem(clickable=True, href='https://quasar.dev', a=c7, click=openNewUrl)
    c10 = jp.QItemSection(avatar=True, a=c9)
    c11 = jp.QIcon(name='school', a=c10)
    c12 = jp.QItemSection(a=c9)
    c13 = jp.QItemLabel(a=c12, text='Docs')
    c14 = jp.QItemLabel(caption=True, a=c12, text='https://quasar.dev')
    c15 = jp.QItem(clickable=True, href='https://github.quasar.dev', a=c7, click=openNewUrl)
    c16 = jp.QItemSection(avatar=True, a=c15)
    c17 = jp.QIcon(name='code', a=c16)
    c18 = jp.QItemSection(a=c15)
    c19 = jp.QItemLabel(a=c18, text='GitHub')
    c20 = jp.QItemLabel(caption=True, a=c18, text='github.com/quasarframework')
    c21 = jp.QItem(clickable=True, href='http://chat.quasar.dev', a=c7, click=openNewUrl)
    c22 = jp.QItemSection(avatar=True, a=c21)
    c23 = jp.QIcon(name='chat', a=c22)
    c24 = jp.QItemSection(a=c21)
    c25 = jp.QItemLabel(a=c24, text='Discord Chat Channel')
    c26 = jp.QItemLabel(caption=True, a=c24, text='https://chat.quasar.dev')
    c27 = jp.QItem(clickable=True, href='https://forum.quasar.dev', a=c7, click=openNewUrl)
    c28 = jp.QItemSection(avatar=True, a=c27)
    c29 = jp.QIcon(name='record_voice_over', a=c28)
    c30 = jp.QItemSection(a=c27)
    c31 = jp.QItemLabel(a=c30, text='Forum')
    c32 = jp.QItemLabel(caption=True, a=c30, text='https://forum.quasar.dev')
    c33 = jp.QItem(clickable=True, href='https://twitter.quasar.dev', a=c7, click=openNewUrl)
    c34 = jp.QItemSection(avatar=True, a=c33)
    c35 = jp.QIcon(name='rss_feed', a=c34)
    c36 = jp.QItemSection(a=c33)
    c37 = jp.QItemLabel(a=c36, text='Twitter')
    c38 = jp.QItemLabel(caption=True, a=c36, text='@quasarframework')
    c39 = jp.QItem(clickable=True, href='https://facebook.quasar.dev', a=c7, click=openNewUrl)
    c40 = jp.QItemSection(avatar=True, a=c39)
    c41 = jp.QIcon(name='public', a=c40)
    c42 = jp.QItemSection(a=c39)
    c43 = jp.QItemLabel(a=c42, text='Facebook')
    c44 = jp.QItemLabel(caption=True, a=c42, text='@QuasarFramework')
    c45 = jp.QPageContainer(a=c1, classes='bg-grey-3')
    c46 = jp.QPage(padding=False, style_fn=True, a=c45)
    c47 = jp.Div(classes='full-height full-width', a=c46)
    c15 = jp.Div(classes="absolute", style="top: 50%; right: -13px", a=c6)
    c16 = jp.QAvatar(a=c15, text_color='white', size="25px", dense=True, round=True, unelevated=True, color="grey-7", icon="chevron_left", click=toogleLeftDrawer)
    c16.c6 = c6
    # l1_col = jp.QScrollArea(a=c6)
    l1 = jp.Div(classes='q-pa-sm')
    jp.Div(text='Before', classes='text-h4', a=l1)
    for i in range(3):
        jp.Div(text=f'{i}. {lorem}', a=l1, classes='q-py-xs')

    l3 = jp.Div(classes='q-pa-sm')
    grid = jp.AgGrid(a=l3, auto_size=True, style = "height: 100vh; width: 100%; margin: 0rem; padding: 0rem;", theme='ag-theme-material')
    grid.load_pandas_frame(wm_df)
    grid.options.columnDefs[0].checkboxSelection = True
    grid.options.columnDefs[0].headerCheckboxSelection = True
    grid.options.columnDefs[0].headerCheckboxSelectionFilteredOnly = True
    grid.options.columnDefs[1].filter = 'agTextColumnFilter'
    grid.options.columnDefs[1].cellStyle = {"textAlign": "left"}
    grid.options.defaultColDef.filter = True
    grid.options.defaultColDef.floatingFilter = True
    grid.options.defaultColDef.enableValue = True
    grid.options.defaultColDef.editable = True
    grid.options.defaultColDef.sortable = False
    grid.options.animateRows = True
    grid.options.enableCharts = True
    grid.options.enableRangeSelection = True

    grid.options.rowSelection = 'multiple'
    grid.options.sideBar = True

    s1 = jp.QSplitter(style='height: 100%', a=c47, classes='q-mx-xs')
    s1_avatar_div = jp.Div(classes="absolute", style="top: 50%; right: -21px")
    s1_avatar = jp.QAvatar(a=s1_avatar_div, color="grey-7", size="25px", icon="unfold_more", text_color='white', classes='rotate-90')
    s1.value = 15.0
    s1.limits = [15, 80]

    s1.before_slot = l1
    s1.after_slot = l3
    s1.separator_slot = s1_avatar_div
    
    return wp

jp.justpy(grid_test5)

[WolfgangFahl]

Please answer in stackoverflow and make sure you tag with aggrid css and the like since this is definitelty not a justpy specific question. If you come up with a better default styling you are welcome to file a change request. Please note that we need more contributors and contributions especially with the current backlog of milestone work to be done and therefore our ressources for support and experimenting are very very very scarce. It's been a problem of this project for over two years that people expect and "out of the box" experience that includes the experience of the components that justpy makes available while justpy itself is just the infrastructure for transporting the component settings back and forth. We'd love to improve our examples and tutorials based on feedback and experiments of users such as you - asking the dozen or so contributors here is not effective if you can ask thousands of users on stackoverflow. This is also clearly pointed out in https://justpy.io/#if-you-have-questions-suggestions-or-would-like-to-get-in-touch