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.

Set the dcc.DateRangePicker(…, style={‘position’: ‘relative’, ‘zIndex’: 999}) works for me~ because the zIndex determine the z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order. (From w3schools)