Using justify = start (within Dash Bootstrap) doesn't move all items to the left

I am using Dash Bootstrap to add multiple option names/fields to the same line. I would like all of these to be left justified so that they don’t take up the entire page.

My code adds justify = "start" within the dbc.Row definitions, as specified on the Dash Bootstrap documentation. I expected that this would move all of my fields to the left, as suggested by the image on the documentation page:

However, the fields are instead spread out across the page:

Any thoughts on how I can resolve this issue? I’ve pasted my code below:

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc


app = Dash(__name__, external_stylesheets = [dbc.themes.BOOTSTRAP])

server = app.server 

app.layout = html.Div(
    children = [

    dbc.Row([
      
    dbc.Col(html.H5(children = "Number of airports to show (up to 20):")),

    dbc.Col(dcc.Input(id="interactive_air_traffic_airports_limit", 
    type="number", value=5, min = 1)),


dbc.Col(html.H5(children = "Route Types To Show:")),
    dbc.Col(dcc.Dropdown(['Domestic', 'International'], 
    ['Domestic','International'], 
    id='interactive_air_traffic_route_types', multi = True)), 


    ], justify = "start"),


    dbc.Row([

    dbc.Col(html.H5(children = "Color bars based on:")),
    dbc.Col(dcc.Dropdown(['Airport', 'Airline', 'Route Type', 
    'None'], 'Airport', id='color_value_input', multi = False)),

    dbc.Col(html.H5(children = "Compare by:")),
    dbc.Col(dcc.Dropdown(['Airport', 'Airline', 'Route Type'], 
    ['Airport'], id='pivot_value_input', multi = True)),
    ], justify = "start")
    ])



if __name__ == '__main__':
    app.run_server(debug=True)

Specifying a width for each column resulted in a left-justified look. So I’m guessing that justify = ‘start’ won’t work unless widths are specified? (The example on the Dash page also specified widths for each column.)

Updated view:

Updated code:

# Demonstration app for issue with left-justifying items
# Related question: https://community.plotly.com/t/using-justify-start-within-dash-bootstrap-doesnt-move-all-items-to-the-left/69928

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc


app = Dash(__name__, external_stylesheets = [dbc.themes.BOOTSTRAP])

server = app.server 

app.layout = html.Div(
    children = [

    dbc.Row([
      
    dbc.Col(html.H5(children = "Number of airports to show (up to 20):"), width = 1),

    dbc.Col(dcc.Input(id="interactive_air_traffic_airports_limit", 
    type="number", value=5, min = 1), width = 2),


dbc.Col(html.H5(children = "Route Types To Show:"), width = 1),
    dbc.Col(dcc.Dropdown(['Domestic', 'International'], 
    ['Domestic','International'], 
    id='interactive_air_traffic_route_types', multi = True), width = 2), 


    ], justify = "start"),


    dbc.Row([

    dbc.Col(html.H5(children = "Color bars based on:"), width = 1),
    dbc.Col(dcc.Dropdown(['Airport', 'Airline', 'Route Type', 
    'None'], 'Airport', id='color_value_input', multi = False), width = 2),

    dbc.Col(html.H5(children = "Compare by:"), width = 1),
    dbc.Col(dcc.Dropdown(['Airport', 'Airline', 'Route Type'], 
    ['Airport'], id='pivot_value_input', multi = True), width = 2),
    ], justify = "start")
    ])



if __name__ == '__main__':
    app.run_server(debug=True)
1 Like

The auto width will try to expand the widths as small as necessary, since you have rather large inputs, that is why it is expanding the full width of space.

When you passed the arguments, you overwrote this auto. :slight_smile:

2 Likes

Makes sense, thank you!

1 Like