How to show Ag grid pop up menu above Quasar QDialog

I am using Ag grid inside quasar QDialog. When the dialog is displayed and I click the column option menu, the Ag grid pop up menu appears behind QDialog, see the picture below:

is there any way to make the ag grid pop up menu shows in the front of the QDialog?

For reference, I see this commmit in Aggrid code: https://github.com/xh/hoist-react/commit/25522b12155f551fcf95e32211a6cbb8aae8ea35 This adds z-index: 9999 !important to the css style.

Maybe there are ways to add the style using justpy directly or is there more correct way?

My code to produce the above apps is written in python using JustPy v0.10.5 library. https://github.com/justpy-org/justpy

import justpy as jp
import pandas as pd

def open_dialog(self, msg):
    self.dialog.value = True

wm_df = pd.read_csv('https://elimintz.github.io/women_majors.csv').round(2)

def main():
    wp = jp.QuasarPage(title='Negative Keyword Editor')
    b1 = jp.QBtn(label='Open dialog', color='primary', a=wp)
    b1.on('click', open_dialog)

    c3_dialog = jp.QDialog(name='alert_dialog', persistent=False, a=wp, maximized=False, full_width=True, transition_show="slide-up", transition_hide="slide-down")
    c4_dialog = jp.QCard(a=c3_dialog)
    c5_dialog = jp.QCardSection(a=c4_dialog)
    c6_dialog = jp.Div(classes='text-h6', a=c5_dialog, text='アカウントを選択：')
    c7_dialog = jp.QCardSection(a=c4_dialog, classes='q-pa-none')

    grid_dialog = jp.AgGrid(a=c4_dialog, auto_size=True, style = "height: 60vh; width: 100%")
    grid_dialog.load_pandas_frame(wm_df)
    grid_dialog.options.columnDefs[0].checkboxSelection = True
    grid_dialog.options.columnDefs[0].headerCheckboxSelection = True
    grid_dialog.options.columnDefs[0].headerCheckboxSelectionFilteredOnly = True
    grid_dialog.options.columnDefs[1].filter = 'agTextColumnFilter'
    grid_dialog.options.columnDefs[1].cellStyle = {"textAlign": "left"}
    grid_dialog.options.defaultColDef.filter = True
    grid_dialog.options.defaultColDef.floatingFilter = True
    grid_dialog.options.defaultColDef.enableValue = True
    grid_dialog.options.defaultColDef.editable = True
    grid_dialog.options.defaultColDef.sortable = False
    grid_dialog.options.animateRows = True
    grid_dialog.options.enableCharts = True
    grid_dialog.options.enableRangeSelection = True
    grid_dialog.options.statusBar = {
        'statusPanels': [
            {'statusPanel': 'agTotalAndFilteredRowCountComponent'},
            {'statusPanel': 'agTotalRowCountComponent'},
            {'statusPanel': 'agFilteredRowCountComponent' },
            {'statusPanel': 'agSelectedRowCountComponent' },
            {'statusPanel': 'agAggregationComponent' },
        ],
    }
    grid_dialog.options.rowSelection = 'multiple'
    grid_dialog.options.sideBar = True

    c8_dialog = jp.QCardActions(align='right', a=c4_dialog)
    c9_dialog = jp.QBtn(flat=True, label='Cancel', color='primary', v_close_popup=True, a=c8_dialog)
    c11_dialog = jp.QBtn(flat=True, label='Download', color='primary', v_close_popup=True, a=c8_dialog)
    b1.dialog = c3_dialog

    return wp

jp.justpy(main)

Answer

I add the required css into the wp.css:

wp.css = """
    .ag-menu {z-index: 9999 !important;}
    """

reference: https://github.com/justpy-org/justpy/blob/master/jpcore/webpage.py#L52

the result looks like below, which shows the ag grid pop up menu above the quasar dialog.

Advertisement

Answer