How to make dropdown menu appear in the foreground when using a data table below it with fixed header?

Dash Python
1

I want to have a dropdown menu and a data table right below it with a fixed header and a fixed height (make the table scrollable).

dcc.Dropdown(
    id='dropdown',
    options=[
        {'label': i, 'value': i}
        for i in values
    ],
    value='something'
)

dash_table.DataTable(
...
fixed_rows={'headers': True, 'data':0},
editable=True
)

The problem is that as you can see in the image below the header is in the foreground and hiding some of the dropdown options

snHSJiv.png1875×422

I have tried putting putting a

 style={ 'z-index': 100}

into the dropdown context and also for the table (with a smaller z_index of course) but that doesnt do anything.

I would greatly appreciate help

2 Likes
2

Z index is the correct way to do it.
You just have to use camelCase:

style={'zIndex': 100}

3

So after trying some stuff I just cant get it to work.
When using the ‘zIndex’ within a dcc.Dropdown(…) it seems to only apply to the top menu. When clicking it and expanding the options below they all seem to have a ‘zIndex’ of 0.

So setting it up for the dropdown menu doesnt really work.
I then tried to set up the table to have negative ‘zIndex’. When I do it within a header like this:

style_header={ 'zIndex': -100 },

it doesnt do anything. I guess it is having trouble with the fixed_rows property?
If I set the ‘z-Index’ of the whole table to -100:

style_table={ 'zIndex': -100 },

the dropdown options are finally in the foreground BUT suddenly the table is NOT editable anymore…

Anyone has further advice to solve this?

4

Can you share a reproducible example of the code you are working on?

Some thought that might help:

  • style_header probably will not work, because this is not about the style of the table’s container.
  • style_table: I think the same is valid, this is mainly about styling the table elements, but not the table and how it relates to other elements on the page/app.
  • Try putting each one of the elements in a special div and manage the zIndex there, it might be easier to figure out what is going on this way.

Hope that helps.

5

Here is some really simple code example that shows my problem:

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

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div([
        dcc.Dropdown(
            id='dropdpwon',
            options=[
                {'label': i, 'value': i}
                for i in range(15)
            ],
            style={'zIndex': 10},
            value=5
        ),
    ],
    style={'zIndex': 10}
    ),
    html.Div([
        dash_table.DataTable(
            id='table_hno3',
            columns=(
                    [{'id': 'datetime', 'name': 'datetime', 'editable': False}] +
                    [{'id': 'value', 'name': 'value', 'type': 'numeric'}]
            ),
            data=[
                dict({'datetime': i, 'value': 0})
                for i in range(0, 49)
            ],
            fixed_rows={'headers': True, 'data': 0},
            style_table={
                'height': 500,
                'width': '250px',
                'border': 'thin lightgrey solid'
            },
            editable=True,
        )
    ],
        style={'zIndex': -10}
    )
]
)

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

The only way I have managed to get the table header into the background was with ‘style_table’ and the ‘zIndex’ but then the table is not clickable/scrollable/editable anymore…
Still desperately looking for a solution

6

Strange.

When you set zIndex under style_table it works fine, but the table is not longer editable or scrollable.

Not sure, it might be a bug, or something we are missing.

7

I think I found the solution @dimark.

It seems that setting zIndex needs to be done with a very high number, like 999 (I tried 300 for example but it doesn’t work). Not sure why, but it worked for me.

Also, you need to make sure to include another key in the style dictionary, which is for position: 'relative'.

So, you should have something like this:

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

Hope this helps!

4 Likes
8

Thanks a lot, I had asked this question multiple time in the past specifying z-index wasn’t working and no one answered.

This was extremely helpful!

1 Like