Z-index issue between dropdown content and dashTable header

Dash Python
1

I added n-fix-rows=1 to my dashTable and it gives this view when the dropdown is selected. I added z-index =2 to my dropdown and z-index=1 to the table but it’s still there.
image

1 Like
2

Have you found a solution? I am running into same issue

3

Try using a higher z-index and add ‘position’: ‘relative’ to the dropdown style. If you updated to Dash 1.0 the formatting for fixing rows and columns has changed. This works in dash v0.43.0 at least.

app.layout = html.Div([
    dcc.Dropdown(id='my_dropdown',
    options=[
        {'label': f'blah-blah {i}', 'value': i} for i in range(10)
    ],
    value=None,
    clearable=False,
    style={
        'position': 'relative',
        'zIndex': '999',
    }
),
dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in df.columns],
    data=df.to_dict('records'),
    n_fixed_rows=1,
    style_table={
        'maxHeight': '100px',
        'overflowY': 'scroll',
    },
)
])
4

How can you turn off the horizontal scroll?

5

overflow: hidden
is not working currently

6

Hi,

I solved this problem by assigning the dropdown the className of three columns from this external stylesheet https://codepen.io/chriddyp/pen/bWLwgP.css. I also changed the three columns a little bit so it looks like this:

  .three.columns                  { width: 22%;
                                    z-index: 1111;
                                    margin-bottom: 20px    }

And for the header I assigned a z-index of 5. Hope it helps!

7

I had a similar problem while displaying a toast from dash bootstrap components. It would show behind dcc graphs. I solved it by specifying the zIndex and setting position to relative in the style of the Div containing the toast

8

Using the zindex solves the dropdown issue but when I use tooltip in the table, the tooltip gets behind the datepicker which has a higher zindex now. I’m not sure if I can change the zindex of the tooltip or not but the following did not work:

dash_datatable = dash_table.DataTable(
    id='tag-table',
    style_table={'minWidth': '100%'},
    css=[{
        'selector': '.dash-table-tooltip',
        'rule': 'z-index: 999; !important'
    }]
)