Last week I learned about Dash and I immediately got interested in developing a small tool to perform and help visualize some technical computations in my organization. Because of its technical nature, this app will have many input fields and buttons. I learned about Dash Bootstrap Components and it seems to me that this should make it a lot easier to organize all of this into a tidy grid.
The problem is that the column positioning does not seem to work for me. I read the guide at the following location Layout - dbc docs, which makes the positioning seem really easy. As long as the widths do not sum up above 12, the columns should nicely space out and not wrap onto the next line (regardless of screen size). Unfortunately I get some unexpected behavior (I demonstrate two examples of odd behavior in the image and script below).
1: In the row on the top-right, the last column wraps to the next line (in most cases, sometimes it doesn’t). 2: In the row on the bot-right, the last columns ends up on top of the middle column.
Please note that I am not explicitly loading the .css in this script. I am working offline. The workaround I used is to download the .css that would otherwise have been loaded and put it in a ‘assets’ folder. I tried multiple of the Dash Bootstrap Component .css files (here I use bootstrap-grid.min.css, which otherwise would have been loaded using a call to external_stylesheets with dbc.themes.GRID), but the problem is always the same. These two problems may be dependent on screen size (even though I don’t think they should as long as the widths add up to 12 or less).
I have browsed for a solution for quite a while and tested a lot, but no success. If someone with more experience than I have would be able to help me I would be very grateful. Thanks!
Small self-contained portion of my script
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc
#Developing offline, therefore I have to use a local .css from dash boostrap which I placed in the ./assets/ folder.
#For convenience, I have added the stylesheet code line below, even though I don't have it in my local script
dash.Dash(external_stylesheets=[dbc.themes.GRID])
num_reservoirs_max = 9
#distance
distance_unit_list_m = ["m", "meter"]
distance_unit_list_ft = ["ft", "foot", 'feet']
standard_distance_unit_m = "m"
standard_distance_unit_ft = "ft"
#density
density_unit_list_gcm3 = ["g/cm3", "gcc"]
density_unit_list_kgm3 = ["kg/m3"]
standard_density_unit_gcm3 = "g/cm3"
standard_density_unit_kgm3 = "kg/m3"
standard_distance_units = [standard_distance_unit_m, standard_distance_unit_ft]
standard_density_units = [standard_density_unit_gcm3,standard_density_unit_kgm3]
app = dash.Dash(__name__, prevent_initial_callbacks=True)
app.layout = html.Div([
dbc.Row([
dbc.Col(
dbc.Row([
dbc.Col(html.Div("Number of reservoirs to compute 4D"), width=6, align="center"),
dbc.Col(dcc.Dropdown(id="num_reservoirs",
options=[dict(label=(i+1), value=(i+1)) for i in range(num_reservoirs_max)],
value=1, clearable=False
)
,align="center"),
dbc.Col(html.Button('Submit', id='submit_num_reservoirs'), width=3, align="center")
]),
width=3, style={"border-right":"2px black solid"}),
dbc.Col([
dbc.Row([
dbc.Col(html.Div("Water depth (used to compute total pressure)"), width=5),
dbc.Col(dcc.Input(id="water_depth", type="number")),
dbc.Col(dcc.Dropdown(id="water_depth_units",
options=[dict(label=unit, value=unit) for unit in standard_distance_units],
value=standard_distance_unit_m,
clearable=False,
style={'width': '100%'}
)
, width=2)
], align='center'),
dbc.Row([
dbc.Col(html.Div("Overburden bulk density (used to compute total pressure)"), width=5),
dbc.Col(dcc.Input(id="overburden_bulk_rho", type="number"), width=2),
dbc.Col(dcc.Dropdown(id="overburden_bulk_rho_units",
options=[dict(label=unit, value=unit) for unit in standard_density_units],
value=standard_density_unit_kgm3,
clearable=False,
style={'width': '100%'}
)
, width=3)
], align='center')
]
,width=3, style={"border-right":"2px black solid"}),
], style={"border-bottom":"2px black solid"})
])
if __name__ == '__main__':
app.run_server(debug=True, dev_tools_hot_reload=False)
