DataTable Filter Data Row is tiny (too small to see or type in)

Hi Everyone,

I’m unable to get to the bottom of a particular bug with the formatting of DataTable row heights. Curious to see if anyone else is having the same issue, or has already figured out how to solve it. The issue is as follows:

When I set the row height to ‘auto’ in my DataTables, the ‘format cells’ row (immediately beneath the header) is tiny. Its so small I can barely see it, and am unable to see the text I’m typing into it. Here is a screenshot (I blocked out some of the data)

Here is the code I’m using for the dashtable. (I sanitized some of the names from the code and replaced with ‘zzz’…)

all_zzz_data_tab = dcc.Tab(
id=‘zzz_data_tab_id’,
label=‘Browse All zzz’,
value=‘all_zzz_spreadsheet’,
children=
dash_table.DataTable(
id=‘all_zzz_data’,
columns=[{“name”: i, “id”: i, “deletable”: True} for i in zzz.columns],
data=zzz.to_dict(‘records’),
export_format=‘csv’,
editable=True,
filter_action=“native”,
sort_action=“native”,
sort_mode=“multi”,
row_selectable=“multi”,
row_deletable=True,
selected_rows=,
page_action=“native”,
page_current=0,
page_size=25,
style_cell={
‘textAlign’: ‘left’,
‘whiteSpace’: ‘no-wrap’,
‘overflow’: ‘hidden’,
‘textOverflow’: ‘ellipsis’,
‘maxWidth’: 0,
‘height’: ‘auto’
#‘height’: 25
},
#fixed_rows={“headers”: True, “data”: 0}
#style_header={‘height’: 25}
#style_table={
# ‘width’: ‘100%’,
# ‘maxHeight’: ‘300’,
# ‘overflowY’: ‘scroll’
# },
)
)

Of note, I set the row height to ‘auto’ because of a separate row height formatting issue, which is being discussed here:

Thanks in advance for everyones help.

Ben

I am having this issue as well

hi there, has anyone found any solution to that issue? I face exactly the same problem, i.e. the second row for filtering is so small that I cannot see any text in it. Can this be changed with css?