Header row overlaps Dropdown when fixed_rows is set

[kasparthommen]

trafficstars

Hi all,

Here's a minimal example:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table

app = dash.Dash(__name__, eager_loading=True)

app.layout = html.Div([
    # Note that "one" isn't visible because the table header overlaps it
    dcc.Dropdown(id='dropdown', options=[{'label': c, 'value': c} for c in ['one', 'two', 'three']]),

    dash_table.DataTable(
        id='table',
        fixed_rows=dict(headers=True, data=0),
        columns=[{'name': c, 'id': c} for c in ['A', 'B']],
        data=[
            {'A': 'aa', 'B': 'bb'},
        ],
    ),
])

if __name__ == '__main__':
    app.run_server(debug=True)

When opening the dropdown I see the following:

I.e., the table header overlaps the Dropdown, which is clearly wrong.

Here's the output of conda list dash - I'm pretty much on the lastest versions:

dash                      1.9.1
dash-core-components      1.8.1
dash-dangerously-set-inner-html 0.0.2
dash-html-components      1.0.2
dash-renderer             1.2.4
dash-table                4.6.1
dash_utils                0.19

[swt2c]

I'm seeing something similar, but with a DatePickerRange and a DataTable with fixed headers. When opening the DatePicker, the DataTable's header is on top of the DatePicker.

[swt2c]

[RedwoodDowlingkerr]

@swt2c Hi, were you able to solve this? I am facing the exact same issue. Tried changing atrributes like with_portal, but still have the same issue.

[swt2c]

@RedwoodDowlingkerr I can't remember. :-( I think I may have just ended up moving the DatePicker to another location where it couldn't overlap the DataTable.

[RedwoodDowlingkerr]

@swt2c Hi, I just found a solution from another thread. add the following to datepickerrange style.

style={'position': 'relative', 'zIndex': '999'}