CODEWITHSUNDEEP
plotlyplotly-dashdash-bootstrap-components
Birk
Birk

Reputation: 69

Remove empty left space - plotly dash bootstrap

I am using dash bootstrap components so all my components are where I want them in my layout. But they are alinged in the center of their rows. There is a lot of emtpy space from the left side to my first graph. Why is that and how can I remove it?

Here is my Code and how it looks. I don't know why my components are not starting on the left most point. Except of course for my 'Title'. This is supposed to be center. But my labels and graph are off.

from dash import Dash, dcc, html, Input, Output  # pip install dash (version 2.0.0 or higher)
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets = [dbc.themes.BOOTSTRAP])
# ------------------------------------------------------------------------------
# App layout
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H1("Title", style={'textAlign': 'center'})
        ], width=12)
    ]),

    dbc.Row([
        dbc.Col([
            html.Label("Label1"),
            dcc.Loading(id='loading0', parent_style=loading_style, children = [dcc.Graph(id='feature_plots', figure={})])
        ], width=6),
        dbc.Col([
            html.Label("Label2"),
        ], width=3)
    ]),
]
)

Layout with empty space on the left side

Upvotes: 1

Views: 1189

Answers (1)

vestland
vestland

Reputation: 61134

Try to include fluid = True in your dbc.Container(). That will probably leave som space below your app, so you might also want to include style={"height": "100vh"} to make sure the container spans the entirety of the available vertical space. Here's the result on my end with an altered background color. So the complete change to the snippet below compared to your setup is:

className = 'bg-success ', fluid = True, style={"height": "100vh"}

Image of app:

enter image description here

Complete code:

# from dash import Dash, dcc, html, Input, Output  # pip install dash (version 2.0.0 or higher)
# import dash_bootstrap_components as dbc

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

app = Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
# ------------------------------------------------------------------------------
# app  = JupyterDash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H1("Title", style={'textAlign': 'center'})
        ], width=12)
    ]),

    dbc.Row([
        dbc.Col([
            html.Label("Label1"),
            dcc.Loading(id='loading0',
                        # parent_style=loading_style,
                        children = [dcc.Graph(id='feature_plots', figure={})])
        ], width=6),
        dbc.Col([
            html.Label("Label2"),
        ], width=3)
    ], className = "")
], className = 'bg-success ', fluid = True, style={"height": "100vh"}
)

# app.run_server(mode='inline', port = 9011)  
app.run_server(port = 9096, use_reloader = False)

Upvotes: 2

Related Questions