How to align Cols on left?

Dash Python
1

I have a image in a Col, the image is in the center of Col now. I want to push it to left. I tried justify=‘start’,
style = { ‘margin-left’: ‘0px’ }
style = {‘textAlign’:‘left’}

None of them works for me. see my code below, please help me out.

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

import numpy as np
import plotly.graph_objects as go
import plotly.express as px

figure = px.imshow(np.zeros((1, 1)) * 255, binary_string=True)
figure.update_yaxes(matches=None, showticklabels=False, visible=False)
figure.update_xaxes(matches=None, showticklabels=False, visible=False)
figure.layout['margin'] = go.layout.Margin(b=0, l=0, t=0, pad=0)

# Set up the app
app = dash.Dash(__name__)

app.layout = html.Div(
    [
            dbc.Row(
                [
                    dbc.Col(
                        dcc.Graph(
                            figure=figure,
                            config={
                                'displayModeBar': False
                            },
                            style = {'textAlign':'left'} # doesn't work
                        ),
                        # style = {   'margin-left': '0px'  }  # doesn't work
                        style = {'textAlign':'left'} # doesn't work
                    ),
                ],
                justify='start',  #doesn't work
                style = {'textAlign': 'left'} # doesn't work
            ),
    ]
)


if __name__ == "__main__":
    app.run_server(debug=False)
2

What happens if you uncomment the below part and set the left margin to a negative value?

style = {   'margin-left': '0px'  }

I’d suggest to use Bootstrap specific classes and set the “className” property to the appropriate one so that your column content is aligned left. Bootstrap official documentation has guidelines around available classes for alignment and how to use your own CSS files to override the default behavior.

3

Thank you for your help. I uncommented that part and set a negative value, the image is still in the middle. I found ‘ml-auto’ to align left in bootstrap( I could be wrong), I manually added them into html element view(see below) after adding external_stylesheets in my code. I am afraid CSS doesn’t apply to SVG. when I manually changed ‘x’ in image tag from 0 to -200, the image did shift to left. however I don’t know how to assign this -200 in python code, and I have multiple images, I need to calculate offset for each images.

image
image1875×1085 124 KB

4

The negative margin is on the <div class="col"> part, like below:

image
image2961×1670 177 KB