Search code examples
pythonhtmllayoutplotlyplotly-dash

Dash Bootstrap: Problems with layout of columns

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 https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/, 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. 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. 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. This problem may be dependent on screen size (even though I don't think it 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!

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)

Figure showing how the last column wraps to the next line in the top right. On the bottom right the column ends up on top of the middle column

Solution

  • The main problem seems to be the inputs you're using. You're using the inputs from the dash_core_components module instead of from the dash_bootstrap_components module.

    So instead of this:

    dbc.Col(dcc.Input(id="water_depth", type="number"))

    do this:

    dbc.Col(dbc.Input(id="water_depth", type="number"))

    If you want to use dcc.Input, but with the the bootstrap styling you could alternatively do this:

    dcc.Input(
    id="overburden_bulk_rho",
    type="number",
    className="form-control",
)

    Update

    As mentioned in the comments by OP you need to use bootstrap.min.css for the css classes generated by the code above to take effect. See this reference for what's included in bootstrap-grid.min.css and what's included in bootstrap.min.css.