Datatable header overlaps on dropdown list

Dash Python
1

image
image1920Ɨ1040 72.9 KB

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

2

@chriddyp, @Damian any updates on this?

3

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.

4

Oh I didnā€™t know that. Sorry @Damian.

5

@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(
    id='table',
    columns=[{"name": i, "id": i} for i in tab_df.columns],
    data=tab_df.to_dict("rows"),
    n_fixed_rows=1,
    style_table={'overflowX': 'scroll',
                 'maxHeight': '700px',
                 'maxWidth': '1500px',
                 'border': 'thin lightgrey solid'
                 },
    style_cell={'width': '150px',
                'textAlign': 'left'
                },
    style_cell_conditional=[
        {
            'if': {'row_index': 'odd'},
            'backgroundColor': 'rgb(248, 248, 248)'
        }
    ],
    style_header={
        'backgroundColor': '#3DC2ED',
        'fontWeight': 'bold'
    },
    css=[{
        'selector': '.dash-cell div.dash-cell-value',
        'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
    }],

)

return table_data
6

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?

datatable
datatable.png715Ɨ555 18.7 KB

7

Thanks for reporting this. Weā€™ve opened an issue for it here to follow it up: https://github.com/plotly/dash-table/issues/303.

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.

8

Hi!

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;

dcc.Dropdown(id='my-dropdown',
                     #[...]
                     className='three columns',
                     #[...]

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

dash_table.DataTable(
            id='table',
            #[...]
            style_header={
                #[...]
                '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:

image
image745Ɨ284 7.22 KB

9

This will be fixed in the next Dash release.

1 Like
10

looks like this is happening with the datepicker as well:

DatePicker
DatePicker682Ɨ640 18.8 KB

I am also using the fixed header.

12

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)

2 Likes