Dbc Toast appears behind datatable

Dash Python
1

I have a dash data table where the column headers are fixed. I am using dbc.Toast to display error messages. Once the Toasts get down to where the table is, they are behind the data table. I tried ‘position’: ‘relative’ and ‘zindex’: 1111 in the Toast but it does not help. How can I get the Toasts to always be in front of the data table. I see bug reports of dcc dropdowns having this problem but supposedly it is fixed. Issue 788 - dcc.Dropdown dropdown should have priority over table fixed rows/columns by Marc-Andre-Rivet · Pull Request #790 · plotly/dash-core-components · GitHub

2

For some more information on this. I am putting the Toasts in an html.Div as a toast container. I use style={‘position’: ‘fixed’, ‘top’: 10, ‘right’: 10, ‘width’:350} to put the container at the top right corner of the screen. If I try adding ‘position’: ‘relative’, and ‘zindex’: 1111 to try and get the toasts in front of the datatable fixed column header and filter data rows, the toasts no longer appear in the top right corner. With ‘position’:‘fixed’ the toasts appear in the top right corner where I want and on top except for the data table fixed column header row and filter row. The toasts show up on top of the other data table rows. How can I get them in the top right corner and on top of everything?

3

Stack order is always a fun trial and error, i’m no css expert but did you try:
1.) Keeping the toast style the same but adding a z-index to the data table
2.) Add a position attribute to the data table itself
3.) Any combination of the above?

Few things to maybe try

4

Thanks for the suggestion. I put ‘position’: ‘relative’, ‘zindex’: 1 in all of the following:
style_data_conditional, style_table, style_header, style_filter. I also tried zindex 0. Nothing will bring the Toast above the column header and filter row. Is there a way to see what style or zindex is being used in the colomn header and filter rows?

The zindex appears to make no difference at all. What seems to matter as far as the stacking is the order in the CardBody or Container which ever one I put the toast container in. I have to move the toast container after everything else for it to appear on top. However, the column header and filter rows still appear on top.

content = dbc.Card([dbc.CardBody([dbc.Row([dbc.Col(dbc.Button("Menu", id='open-menu', size='sm', n_clicks=0),
                                                   width={'size': 3}),
                                           dbc.Col(html.H2('Safety Stock 2.0 (Kingpin)', className='card-title'))]),
                                  html.Hr(),
                                  html.Div(id='page-content', style={'padding': '0rem'}),
                                  html.Div(id='toast-container', style={'position': 'fixed', 'top': 10, 'right': 10, 'width': 350})])])

app.layout = dbc.Container([dcc.Location(id='url'),
                            dbc.Offcanvas(sidebar, id="off-canvas-sidebar", is_open=False),
                            content,
                            dcc.Store(id='current-version', storage_type='local'),
                            dcc.Store(id='current-brand', storage_type='local'),
                            dcc.Store(id='current-market-year', storage_type='local'),
                            dcc.Store(id='current-user-id', storage_type='local'),
                            dcc.Store(id='app-user-id', data=APP_USER_ID),
                            dcc.Store(id='message-store'),
                            dcc.Store(id='update-output-msg-store'),
                            dcc.Store(id='save-changes-msg-store')],
                           fluid=True)

That article is very informative. It would be useful to know what the datatable column headers and filter rows zindex is to try to get on top of them.

5

Same issue – I tried setting z-index for the Toast but when I inspected the element the z-index was not set.

I get around this I used a .css file and set the z-index

.toast {
  z-index: 999 !important;
}