Problems with Dash Table Dropdowns

Dash Python
1

Hi all,

I have been trying to get conditional dropdowns to work in a datatable, but the options in the dropdown columns don’t load properly. Each cell will show an arrow for a dropdown, but when clicked nothing will show up.

Here is the code for the datatable:

dtb.DataTable(id='conditional_column_dropdown_experiments',
	data=df.to_dict('records'),
	columns=[
		{'name': col, 'id': col, 'type': 'dropdown'}
		for col in cols
	],
	editable=True,
	column_conditional_dropdowns=[
		{
			'id': col,
			'dropdowns': [
				{
					'condition': 'index eq "{}"'.format(val),
					'dropdown': [
						{'label': i, 'value': i}
						for i in list(range(5))
					]
				}
			for val in index_val]
		}
	for col in cols if col != 'index'
    ]
)

Where cols and index_val are lists generated from the dataframe where the dropdowns are necessary.

I have tied the table to a basic callback, but there is still no luck rendering the dropdowns.

Thanks in advance for your help!

AHB

2

Solved the issue (sort of)

Apparently there is a conflict with Bootstrap 4 which prevents dropdowns in the table rendering properly.

I will submit a bug report to the github page later today.

3

Although I am responding to an old post, I am having the same issue: the dropdown menus within a DataTable show an arrow, but no options when clicked. Initially, I assumed the problem was with my code (as I am dynamically assigning the dropdown_conditional property from a callback, as described here and links therein). But when I examined the relevant nodes in the Callback Graph, I could see it was being populated correctly.

From this, I assumed the problem was related to my dev environment. So I tried running the DataTable with Per-Row Dropdowns example code in the DataTable documentation.
I am seeing the same behavior with the example; the dropdowns are there, but the options don’t populate.

I found the current thread after that; I don’t know what the “Bootstrap 4” reference is to. I rebuilt my environment (running in Docker) without version constraints to try to get the latest of everything; I am running dash-bootstrap-components 1.3.1. Otherwise, I am running Python version 3.9.12 (on an Ubuntu 18 docker image), with these packages:

Package                   Version
------------------------- ---------
attrs                     22.2.0
biopython                 1.80
boto3                     1.26.67
botocore                  1.29.67
certifi                   2022.12.7
charset-normalizer        3.0.1
click                     8.1.3
dash                      2.8.1
dash-bootstrap-components 1.3.1
dash-core-components      2.0.0
dash-daq                  0.5.0
dash-html-components      2.0.0
dash-table                5.0.0
et-xmlfile                1.1.0
exceptiongroup            1.1.0
Flask                     2.2.2
greenlet                  2.0.2
gunicorn                  20.1.0
idna                      3.4
importlib-metadata        6.0.0
iniconfig                 2.0.0
itsdangerous              2.1.2
Jinja2                    3.1.2
jmespath                  1.0.1
MarkupSafe                2.1.2
numpy                     1.24.2
openpyxl                  3.1.0
packaging                 23.0
pandas                    1.5.3
pip                       22.0.4
plotly                    5.13.0
pluggy                    1.0.0
psycopg2                  2.9.5
pytest                    7.2.1
python-dateutil           2.8.2
pytz                      2022.7.1
requests                  2.28.2
s3transfer                0.6.0
setuptools                58.1.0
six                       1.16.0
SQLAlchemy                2.0.2
tenacity                  8.2.0
tomli                     2.0.1
typing_extensions         4.4.0
urllib3                   1.26.14
Werkzeug                  2.2.2
wheel                     0.37.1
zipp                      3.12.1

Any help would be much appreciated-- Thanks!

4

Hi @mwrowe and welcome to the Dash Community :slightly_smiling_face:

There is a conflict between the css in Bootstrap and in the DataTable. You can fix it by adding the followng to a .css file in /assets


/* fixes  when the table dropdown doesn't drop down */
.Select-menu-outer {
  display: block !important;
}
1 Like
5

Thanks for your help-- very much appreciated! This fixed the demo code immediately. Unfortunately, it took me a while longer to get my own dropdowns working. Even after implementing your fix, I had some style properties set that were preventing the dropdowns from rendering, specifically:

'style_cell': {
    'overflow':'hidden',
    'textOverflow':'ellipsis',
},
'style_table': {
    'height':'400px',
    'overflowY':'auto',
    'overflowX':'auto',
},

…seem to have been the culprits. This is what I get for copying code from another app without fully understanding it! I wish these types of issues were mentioned in the official documentation though.

Thanks again!

1 Like