Black Lives Matter. Please consider donating to Black Girls Code today.

Z-index issue between dropdown content and dashTable header

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

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

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',
    },
)
])

How can you turn off the horizontal scroll?

overflow: hidden
is not working currently

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!