如何显示类星体QDialog上方的Ag网格弹出菜单

Question

我在类星体QDialog中使用银栅。当显示对话框时，我单击列选项菜单，Ag网格弹出菜单出现在QDialog后面，请参见下面的图片：

​

有什么办法使ag网格弹出菜单显示在前面的QDialog？

作为参考，我在https://github.com/xh/hoist-react/commit/25522b12155f551fcf95e32211a6cbb8aae8ea35代码中看到这个逗号:它将z-index: 9999 !important添加到css样式中。

也许有办法直接使用justpy添加样式，或者有更正确的方式吗？

我生成上述应用程序的代码是使用JustPy v0.10.5库用python编写的。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 1

我将所需的css添加到wp.css中：

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

参考资料：https://github.com/justpy-org/justpy/blob/master/jpcore/webpage.py#L52

结果如下所示，显示在类星体对话框上方的ag网格弹出菜单。

​

​