Dash bootstrap component with a width of 12 is not extending to the full width of the window

Dash Python
1

The three dash bootstrap components in the dash layout as shown below all have a width of 12, but they just cover the middle part of the window, rather than extending to the full width of the window.

May I ask how to make the dash component, especially the map, to cover the entire width of the window?

  1. the map app as shown in the browser:

image
image2553×1358 225 KB

  1. Dash app:
from dash import Dash, html, dcc, Input, Output
import dash_bootstrap_components as dbc
import graph

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

# use dbc.Container
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H1('Project Locations', style={'textAlign': 'center', 'color': '#000000', 'background': '#ffffff', 'padding': '0px'}),
        ], width = 12),
    ]),

    dbc.Row([
        dbc.Col([
            html.H5('Max Size', style={'textAlign': 'center'}),

            dcc.Slider(id = 'max_size', min = 1, max = 50, step = 1, value = 30, marks = {1: '1', 50: '50'})
        ], width = 12),
    ]),

    dbc.Row([
        dbc.Col([
            dcc.Graph(id='map', figure={}),
        ], width = 12),
    ]),
])

# -- callback ------------------------------------------------------------------
@app.callback(
    Output('map', 'figure'),
    Input('max_size', 'value'),
)
def update_graph(value):
    return graph.fig_aus2

# -- run app -------------------------------------------------------------------
if __name__ == "__main__":
    app.run_server(debug=True)
  1. the separate python file graph.py that contains the code to generate the map:
import pandas as pd
import plotly.express as px

# -- create chart --------------------------------------------------------------
aus_solar = pd.read_csv('./data/project.csv').fillna(0)

fig_aus2 = px.scatter_mapbox(
    aus_solar,
    lat = 'latitude',
    lon = 'longitude',
    size = 'DC Capacity (MWp)',
    size_max = 30,
    hover_data = ['Project/', 'DC Capacity (MWp)'],
    height = 1000,
    zoom = 4,
)

fig_aus2.update_traces(
    marker = dict(
        color = 'red',
    )
)

fig_aus2.update_layout(
    mapbox_style = 'open-street-map',
    margin = dict(l = 0, r = 0, t = 0, b = 0),
)
2

Hi @oat

Try adding fluid=True to the container

app.layout = dbc.Container(
    [
         # other stuff
    ],
    fluid=True
)
``
3 Likes
3

Yes, your suggestion works like a charm.

Thank you, @AnnMarieW !

2 Likes