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

Datatable header overlaps on dropdown list

If you see here, the datatable header overlaps on dropdown list. It is happening for other apps too. is this a bug?

@chriddyp, @Damian any updates on this?

I don’t work here, just follow the what’s going on. If you post a small code example to here or the github you might get a better response.

FYI, I’ve had a lot of trouble laying out the DataTable with the common CSS patterns provided, but not sure if that’s my fault as I’m not very experienced with CSS.

Oh I didn’t know that. Sorry @Damian.

@app.callback(Output(‘tab_data’, ‘children’),
[Input(‘config_list’, ‘value’),
Input(‘sheet_names’, ‘value’)]
def display_tab_data(config, tab):

if tab:
tab_df = pd.read_excel(‘C:\Users\N0207022\Desktop\NGRT\Config\HMR\{}.xlsx’.format(config), sheet_name=tab)

table_data = dash_table.DataTable(
    columns=[{"name": i, "id": i} for i in tab_df.columns],
    style_table={'overflowX': 'scroll',
                 'maxHeight': '700px',
                 'maxWidth': '1500px',
                 'border': 'thin lightgrey solid'
    style_cell={'width': '150px',
                'textAlign': 'left'
            'if': {'row_index': 'odd'},
            'backgroundColor': 'rgb(248, 248, 248)'
        'backgroundColor': '#3DC2ED',
        'fontWeight': 'bold'
        'selector': '.dash-cell div.dash-cell-value',
        'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'


return table_data

Same problem. I haven’t dug into the DataTable code yet, but I suspect this is a common problem, since data is often displayed beneath a drop-down. Maybe a CSS issue?

Thanks for reporting this. We’ve opened an issue for it here to follow it up:

This happens because with fixed rows the header must be absolutely positioned and is given a z-index to behave visually correctly in respect to other absolutely positioned items in the table.


I don’t know what made it work, but I used this this css to stylize the table and edited the three columns class so that it looks like this:

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

Then, when declaring the dropdown I assigned it as a className;

                     className='three columns',

After that, when declaring the dashtable I assigned this style_header to it:

                'z-index': '5px'

And it worked perfectly! I haven’t found yet what makes it work, but I’m satisfied with the results :slight_smile:

This will be fixed in the next Dash release.

1 Like

looks like this is happening with the datepicker as well:

I am also using the fixed header.