Dash plotly DataTable DropDown problem for tall cells

I have a DataTable which has several columns. The cells in one column have several paragraphs of text in it, so cells in that row can be pretty tall on-screen in the DataTable. Another column has a DropDown in each row. Each dropdown has only 3 values in it, “Yes”, “No”, and “tbd”. The problem I have is that if I use a drop down, the allowed values (“Yes”, “No”. “tbd”) don’t appear directly below the dropdown control, but rather below the bottom of the cell in which the DropDown control resides. Is there any way to make the drop down occur directly under the control instead of under the cell which contains the dropdown?

image

Hello @Prettyfield,

Welcome to the community!

Are you using any themes for your dash app? Sometimes their css styles can cause problems.

Well, I’m not actually sure. I don’t see any references to anything called a “theme”. Is there something specific I should be looking for?

Can you provide the code that you are using, including your initialization of the dash app?

Things like dbc or dmc.

jinnyzor,

Well, it looks like I was mistaken, I do use a theme!

app = dash.Dash(name,
routes_pathname_prefix=‘/’,
requests_pathname_prefix=runurl,
external_stylesheets=[dbc.themes.BOOTSTRAP]) # Note: This argument is important

The layout looks like:

Create the layout

row = html.Div(
[ html.H3(“Requirements Comparison Assistant”),
dbc.Row([dbc.Col(html.Div([html.H5(“Reference Sub-Requirements”),
dcc.Upload(
id=‘upload-ref-data’,
children=html.Div([html.A(‘Select Reference File’)]),
style={ ‘width’: ‘30%’,
‘height’: ‘60px’,
‘lineHeight’: ‘60px’,
‘borderWidth’: ‘1px’,
‘borderStyle’: ‘dashed’,
‘borderRadius’: ‘3px’,
‘textAlign’: ‘center’,
‘margin’: ‘10px’
}
), # end dcc.Upload()
html.H6(id = ‘ref_file_label’,
style={‘borderWidth’: ‘5px’,
‘borderRadius’: ‘5px’,
‘textAlign’: ‘left’
}
),
dash_table.DataTable(id = “output-data-upload”,
style_data = {‘whiteSpace’: ‘normal’,
‘height’: ‘auto’,
‘border’: ‘1px solid black’,
‘verticalAlign’: ‘top’
},
columns = [{‘id’:‘req_id’, ‘name’:‘Sub_Requirement_ID’},
{‘id’:‘req_text’, ‘name’:‘Sub_Requirement_Text’}
],
page_action=‘none’,
style_header={‘whiteSpace’: ‘normal’,
‘border’: ‘1px solid black’
},
fixed_rows={‘headers’: True},
virtualization=False,
style_as_list_view=True,
style_table={‘height’: ‘1000px’}, # was 500 px
style_cell = {‘border’: ‘1px solid black’,
‘textAlign’: ‘left’,
‘verticalAlign’: ‘top’,
‘height’: ‘auto’,
‘minWidth’: ‘50px’,
‘width’: ‘auto’,
‘maxWidth’: ‘180px’,
‘whiteSpace’: ‘normal’
},
style_cell_conditional=[{‘if’: {‘column_id’: ‘Sub_Requirement_ID’}, ‘width’: ‘8%’}]
) # end DataTable
] # end list
), # end Div
width=6 # column width
), # end Col
dbc.Col(html.Div([html.H5(“Comparison Sub-Requirements”),
dcc.Upload(
id=‘upload-comp-data’,
children=html.Div([html.A(‘Select Comparison File’)]),
style={ ‘width’: ‘30%’,
‘height’: ‘60px’,
‘lineHeight’: ‘60px’,
‘borderWidth’: ‘1px’,
‘borderStyle’: ‘dashed’,
‘borderRadius’: ‘3px’,
‘textAlign’: ‘center’,
‘margin’: ‘10px’
}
#multiple=True
), # end dcc.Upload()
html.H6(id = ‘comp_file_label’,
style={‘borderWidth’: ‘5px’,
‘borderRadius’: ‘5px’,
‘textAlign’: ‘left’
}
),
dash_table.DataTable(id = “output-comparison”,
export_format=“csv”, # Added for CSV export…
style_data = {‘whiteSpace’: ‘normal’,
‘height’: ‘auto’,
‘border’: ‘1px solid black’,
‘verticalAlign’: ‘top’
},
page_action=‘none’,
style_header={‘whiteSpace’: ‘normal’,
‘border’: ‘1px solid black’
},
fixed_rows={‘headers’: True},
virtualization=False,
style_as_list_view=True,
style_table={‘height’: ‘1000px’}, # was 500 px
style_cell = {‘border’: ‘1px solid black’,
‘textAlign’: ‘left’,
‘verticalAlign’: ‘bottom’,
‘height’: ‘auto’,
‘minWidth’: ‘50px’,
‘width’: ‘auto’,
‘maxWidth’: ‘180px’,
‘whiteSpace’: ‘normal’
},
editable=True, # Needed for drop-down integration
dropdown = {‘Relevant’: {‘options’: [{“label”: “Yes”, “value”: ‘True’},
{“label”: “No”, “value”: ‘False’},
{“label”: “tbd”, “value”: ‘tbd’}
],
‘clearable’: False,
},
‘Gap_Analysis’: {‘options’: [{“label”: “Yes”, “value”: ‘True’},
{“label”: “No”, “value”: ‘False’},
{“label”: “tbd”, “value”: ‘tbd’}
],
‘clearable’: False,
}
},
css = [{“selector”: “.Select-menu-outer”, “rule”: ‘display:block !important’}],
style_cell_conditional=[{‘if’: {‘column_id’: ‘Sub_Requirement_ID’}, ‘width’: ‘8%’},
{‘if’: {‘column_id’: ‘Relevant’}, ‘width’: ‘8%’},
{‘if’: {‘column_id’: ‘Similarity’}, ‘width’: ‘8%’},
{‘if’: {‘column_id’: ‘Gap_Analysis’}, ‘width’: ‘8%’},
],
markdown_options={“html”: True}
), # end datatable

                               html.Div(id='cosine')], #end list
                        ), # end Div
                        width=6,
                        style={"height": "100vh"}
                    )# end Col
        ] # end list
    ), # end Row
]

)

app.layout = row

Thank you for your help!

Hello @Prettyfield,

Could you also wrap your code with preformatted text using the </> button? This makes code a lot more legible, and we can copy it right from the interface. :slight_smile:

<# Create the layout

row = html.Div(
[ html.H3(“Requirements Comparison Assistant”),
dbc.Row([dbc.Col(html.Div([html.H5(“Reference Sub-Requirements”),
dcc.Upload(
id=‘upload-ref-data’,
children=html.Div([html.A(‘Select Reference File’)]),
style={ ‘width’: ‘30%’,
‘height’: ‘60px’,
‘lineHeight’: ‘60px’,
‘borderWidth’: ‘1px’,
‘borderStyle’: ‘dashed’,
‘borderRadius’: ‘3px’,
‘textAlign’: ‘center’,
‘margin’: ‘10px’
}
), # end dcc.Upload()
html.H6(id = ‘ref_file_label’,
style={‘borderWidth’: ‘5px’,
‘borderRadius’: ‘5px’,
‘textAlign’: ‘left’
}
),
dash_table.DataTable(id = “output-data-upload”,
style_data = {‘whiteSpace’: ‘normal’,
‘height’: ‘auto’,
‘border’: ‘1px solid black’,
‘verticalAlign’: ‘top’
},
columns = [{‘id’:‘req_id’, ‘name’:‘Sub_Requirement_ID’},
{‘id’:‘req_text’, ‘name’:‘Sub_Requirement_Text’}
],
page_action=‘none’,
style_header={‘whiteSpace’: ‘normal’,
‘border’: ‘1px solid black’
},
fixed_rows={‘headers’: True},
virtualization=False,
style_as_list_view=True,
style_table={‘height’: ‘1000px’}, # was 500 px
style_cell = {‘border’: ‘1px solid black’,
‘textAlign’: ‘left’,
‘verticalAlign’: ‘top’,
‘height’: ‘auto’,
‘minWidth’: ‘50px’,
‘width’: ‘auto’,
‘maxWidth’: ‘180px’,
‘whiteSpace’: ‘normal’
},
style_cell_conditional=[{‘if’: {‘column_id’: ‘Sub_Requirement_ID’}, ‘width’: ‘8%’}]
) # end DataTable
] # end list
), # end Div
width=6 # column width
), # end Col
dbc.Col(html.Div([html.H5(“Comparison Sub-Requirements”),
dcc.Upload(
id=‘upload-comp-data’,
children=html.Div([html.A(‘Select Comparison File’)]),
style={ ‘width’: ‘30%’,
‘height’: ‘60px’,
‘lineHeight’: ‘60px’,
‘borderWidth’: ‘1px’,
‘borderStyle’: ‘dashed’,
‘borderRadius’: ‘3px’,
‘textAlign’: ‘center’,
‘margin’: ‘10px’
}
#multiple=True
), # end dcc.Upload()
html.H6(id = ‘comp_file_label’,
style={‘borderWidth’: ‘5px’,
‘borderRadius’: ‘5px’,
‘textAlign’: ‘left’
}
),
dash_table.DataTable(id = “output-comparison”,
export_format=“csv”, # Added for CSV export…
style_data = {‘whiteSpace’: ‘normal’,
‘height’: ‘auto’,
‘border’: ‘1px solid black’,
‘verticalAlign’: ‘top’
},
page_action=‘none’,
style_header={‘whiteSpace’: ‘normal’,
‘border’: ‘1px solid black’
},
fixed_rows={‘headers’: True},
virtualization=False,
style_as_list_view=True,
style_table={‘height’: ‘1000px’}, # was 500 px
style_cell = {‘border’: ‘1px solid black’,
‘textAlign’: ‘left’,
‘verticalAlign’: ‘bottom’,
‘height’: ‘auto’,
‘minWidth’: ‘50px’,
‘width’: ‘auto’,
‘maxWidth’: ‘180px’,
‘whiteSpace’: ‘normal’
},
editable=True, # Needed for drop-down integration
dropdown = {‘Relevant’: {‘options’: [{“label”: “Yes”, “value”: ‘True’},
{“label”: “No”, “value”: ‘False’},
{“label”: “tbd”, “value”: ‘tbd’}
],
‘clearable’: False,
},
‘Gap_Analysis’: {‘options’: [{“label”: “Yes”, “value”: ‘True’},
{“label”: “No”, “value”: ‘False’},
{“label”: “tbd”, “value”: ‘tbd’}
],
‘clearable’: False,
}
},
css = [{“selector”: “.Select-menu-outer”, “rule”: ‘display:block !important’}],
style_cell_conditional=[{‘if’: {‘column_id’: ‘Sub_Requirement_ID’}, ‘width’: ‘8%’},
{‘if’: {‘column_id’: ‘Relevant’}, ‘width’: ‘8%’},
{‘if’: {‘column_id’: ‘Similarity’}, ‘width’: ‘8%’},
{‘if’: {‘column_id’: ‘Gap_Analysis’}, ‘width’: ‘8%’},
],
markdown_options={“html”: True}
), # end datatable

                               html.Div(id='cosine')], #end list
                        ), # end Div
                        width=6,
                        style={"height": "100vh"}
                    )# end Col
        ] # end list
    ), # end Row
]

)

app.layout = row
/>

@jinnyzor I guess I don’t really understand your comment: " Could you also wrap your code with preformatted text using the </> button? This makes code a lot more legible, and we can copy it right from the interface." If you mean “precede the code with a bracket and close it with an end bracket”, then that’s what I did (the second time), but to my eyes it doesn’t look like it changed the formatting of what gets displayed.

@Prettyfield, sure.

You can wrap using this button:

Ok, I’m a little slow. I didn’t have that icon in the list at the top of the reply box, but I could insert the “pre-formatted text” using the settings icon. I hope this works. Thank you for your patience.

#  Create the layout
 
row = html.Div(
    [   html.H3("Requirements Comparison Assistant"),
        dbc.Row([dbc.Col(html.Div([html.H5("Reference Sub-Requirements"), 
                                   dcc.Upload(
                                      id='upload-ref-data',
                                      children=html.Div([html.A('Select Reference File')]),
                                      style={ 'width': '30%',
                                              'height': '60px',
                                              'lineHeight': '60px',
                                              'borderWidth': '1px',
                                              'borderStyle': 'dashed',
                                              'borderRadius': '3px',
                                              'textAlign': 'center',
                                              'margin': '10px'
                                      }
                                   ), # end dcc.Upload()
                                   html.H6(id = 'ref_file_label',
                                            style={'borderWidth':  '5px',
                                                   'borderRadius': '5px',
                                                   'textAlign':    'left'
                                            }
                                        ),
                                   dash_table.DataTable(id = "output-data-upload",
                                                        style_data = {'whiteSpace': 'normal',
                                                                      'height':     'auto',  
                                                                      'border':     '1px solid black',
                                                                      'verticalAlign': 'top'
                                                                     },
                                                        columns = [{'id':'req_id', 'name':'Sub_Requirement_ID'},
                                                                  {'id':'req_text', 'name':'Sub_Requirement_Text'}
                                                                 ],
                                                        page_action='none',
                                                        style_header={'whiteSpace': 'normal', 
                                                                     'border':     '1px solid black'
                                                                     },
                                                        fixed_rows={'headers': True},
                                                        virtualization=False,
                                                        style_as_list_view=True,
                                                        style_table={'height': '1000px'},     # was 500 px
                                                        style_cell = {'border':     '1px solid black',
                                                                      'textAlign':  'left',
                                                                      'verticalAlign': 'top',
                                                                      'height':     'auto',
                                                                      'minWidth':   '50px',
                                                                      'width':      'auto',
                                                                      'maxWidth':   '180px',
                                                                      'whiteSpace': 'normal'
                                                                     },
                                                        style_cell_conditional=[{'if': {'column_id': 'Sub_Requirement_ID'}, 'width': '8%'}]
                                                       ) # end DataTable
                                  ] # end list
                                 ),  # end Div
                           width=6               # column width
                         ),  # end Col
                dbc.Col(html.Div([html.H5("Comparison Sub-Requirements"), 
                                  dcc.Upload(
                                      id='upload-comp-data',
                                      children=html.Div([html.A('Select Comparison File')]),
                                      style={ 'width': '30%',
                                              'height': '60px',
                                              'lineHeight': '60px',
                                              'borderWidth': '1px',
                                              'borderStyle': 'dashed',
                                              'borderRadius': '3px',
                                              'textAlign': 'center',
                                              'margin': '10px'
                                      } 
                                      #multiple=True
                                   ), # end dcc.Upload()
                                   html.H6(id = 'comp_file_label',
                                            style={'borderWidth':  '5px',
                                                   'borderRadius': '5px',
                                                   'textAlign':    'left'
                                            }
                                        ),
                                    dash_table.DataTable(id = "output-comparison",
                                                         export_format="csv",                    # Added for CSV export...
                                                         style_data = {'whiteSpace': 'normal',
                                                                       'height':     'auto', 
                                                                       'border':     '1px solid black',
                                                                       'verticalAlign': 'top'
                                                                      },
                                                         page_action='none',
                                                         style_header={'whiteSpace': 'normal', 
                                                                       'border':     '1px solid black'
                                                                      },
                                                         fixed_rows={'headers': True},
                                                         virtualization=False,
                                                         style_as_list_view=True,
                                                         style_table={'height': '1000px'},     # was 500 px
                                                         style_cell = {'border':     '1px solid black',
                                                                       'textAlign':  'left',
                                                                       'verticalAlign': 'bottom',
                                                                       'height':     'auto',
                                                                       'minWidth':   '50px',
                                                                       'width':      'auto',
                                                                       'maxWidth':   '180px',
                                                                       'whiteSpace': 'normal'
                                                                      },
                                                         editable=True,   # Needed for drop-down integration
                                                         dropdown = {'Relevant': {'options': [{"label": "Yes", "value": 'True'},
                                                                                              {"label": "No",  "value": 'False'},
                                                                                              {"label": "tbd", "value": 'tbd'}
                                                                                             ],
                                                                                  'clearable': False,
                                                                                 },
                                                                     'Gap_Analysis': {'options': [{"label": "Yes", "value": 'True'},
                                                                                                  {"label": "No",  "value": 'False'},
                                                                                                  {"label": "tbd", "value": 'tbd'}
                                                                                                 ],
                                                                                      'clearable': False,
                                                                                      }
                                                                    },
                                                         css = [{"selector": ".Select-menu-outer", "rule": 'display:block !important'}],
                                                         style_cell_conditional=[{'if': {'column_id': 'Sub_Requirement_ID'}, 'width': '8%'},
                                                                               {'if': {'column_id': 'Relevant'}, 'width': '8%'},
                                                                               {'if': {'column_id': 'Similarity'}, 'width': '8%'},
                                                                               {'if': {'column_id': 'Gap_Analysis'}, 'width': '8%'},
                                                                              ],
                                                       markdown_options={"html": True}
                                                      ), # end datatable   
 
                                   html.Div(id='cosine')], #end list
                            ), # end Div
                            width=6,
                            style={"height": "100vh"}
                        )# end Col
            ] # end list
        ), # end Row
    ]
)
 
app.layout = row

Alright, I believe that you need to add this to a css file under your assets folder:

.Select-menu-outer {
  display: block !important;
}

This should bring it back to your cells location. If not, could I have some simulated data to test out?

1 Like

Well, it turns out that (I think) I do have that code already, in a file in the assets folder called "“style.css”:

/* style.css */
.Select-menu-outer {
display: block !important;
}

But I also have it in my code:

css = [{“selector”: “.Select-menu-outer”, “rule”: ‘display:block !important’}],

1 Like

Hmm, thats fun.

The code itself might be setup to place the dropdown options at the bottom of the cell…

This was really helpful to me. I had to show big image in data table along with some columns with dropdown options. The drop down was not working for first row and applying this css resolved that issue.
Thanks

1 Like

Welcome to the community!

If you havent, you should check out Dash AG Grid. :slight_smile: