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!
